/* Digitaler Style Guide - Gestaltung
   Bewusst durchgehend hell: Das Werkzeug zeigt Farben, ein Dunkelmodus würde
   die Farbwahrnehmung verfälschen.
   Farben und Schriften nach office/kern/bildsprache.md: Jade als dunkle
   Basis, Peach als ruhige Fläche, Grautöne Iron bis Pearl, Sekundärfarben nur
   für Signale. Seitentitel in Prata, Zwischentitel und alles andere in
   Plus Jakarta Sans.
   Ruhe entsteht aus wenigen Regeln: eine Linie trennt Abschnitte, Kacheln
   tragen nur einen Rahmen, Zahlen stehen in derselben Schrift wie der Text. */

:root {
  --akzent: #2D2A28;          /* Jade */
  --akzent-text: #FFFBF9;     /* Warm White */
  /* Kopfleiste: Grund aus «kopffarbe» im Inhalt, Schrift je nach Helligkeit Jade
     oder Warm White (app.js, zeichneKopf). */
  --kopf-grund: #2D2A28;
  --kopf-text: #FFFBF9;
  --grund: #FFFBF9;           /* Warm White */
  --grund-leise: #F9F7F5;     /* Pearl */
  --flaeche: #FAF1E7;         /* Peach */
  --linie: #EBE8E6;           /* Dove */
  --linie-stark: #CFCCCB;     /* Thunder */
  --text: #2D2A28;            /* Jade */
  --text-leise: #4D4B4A;      /* Iron */
  --text-sehr-leise: #898583; /* Fossil */
  --warnung: #C44B6C;         /* Raspberry */
  --gut: #237F5F;             /* Forest */
  --info: #516EA5;            /* Cruise */
  --leiste-breite: 248px;
  --kopf-hoehe: 72px;
  --radius: 6px;
  --schrift: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --schrift-titel: "Prata", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }

/* --- Kopfbalken ------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 32px;
  background: var(--kopf-grund);
  color: var(--kopf-text);
}

.kopf-marke { display: flex; align-items: center; gap: 22px; min-width: 0; }

.kopf-logo {
  display: flex;
  align-items: center;
  min-height: 36px;
}
.kopf-logo img { max-height: 36px; max-width: 200px; display: block; }
.kopf-logo:empty::before {
  content: "Logo";
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
}

.kopf-titel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: 22px;
  border-left: 1px solid color-mix(in srgb, var(--kopf-text) 24%, transparent);
}
.kopf-name { font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.kopf-unter { font-size: 12.5px; opacity: .7; }

.kopf-werkzeuge { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.suche {
  width: 220px;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--kopf-text) 24%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--kopf-text);
  font-size: 13.5px;
}
.suche::placeholder { color: color-mix(in srgb, var(--kopf-text) 60%, transparent); }
.suche:focus { outline: none; border-color: color-mix(in srgb, var(--kopf-text) 70%, transparent); background: color-mix(in srgb, var(--kopf-text) 8%, transparent); }

.modus-marke {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--kopf-text) 45%, transparent);
  border-radius: 999px;
}

.speicherstand { font-size: 12.5px; opacity: .85; min-width: 0; }

/* Sprachwahl: zwei Knöpfe, der aktive gefüllt. */
.sprachwahl {
  display: flex;
  border: 1px solid color-mix(in srgb, var(--kopf-text) 35%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.sprachwahl button {
  border: 0;
  background: transparent;
  color: var(--kopf-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 6px 11px;
  cursor: pointer;
}
.sprachwahl button[aria-pressed="true"] { background: var(--kopf-text); color: var(--kopf-grund); }

/* --- Grundraster ------------------------------------------------------ */

.rahmen { display: flex; align-items: flex-start; }

.leiste {
  position: sticky;
  top: var(--kopf-hoehe);
  flex: 0 0 var(--leiste-breite);
  width: var(--leiste-breite);
  height: calc(100vh - var(--kopf-hoehe));
  overflow-y: auto;
  padding: 36px 20px 64px 22px;
  border-right: 1px solid var(--linie);
}

.inhalt {
  flex: 1 1 auto;
  min-width: 0;
  padding: 52px 64px 160px;
  max-width: 1220px;
}

.lade-hinweis { color: var(--text-leise); }

/* --- Navigation ------------------------------------------------------- */

.nav-gruppe { margin-bottom: 28px; }

.nav-gruppe-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  margin-bottom: 6px;
}

.nav-gruppe-name {
  flex: 1 1 auto;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-sehr-leise);
  font-weight: 500;
  min-width: 0;
  word-break: break-word;
}

.nav-seite {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--text-leise);
  font-size: 14.5px;
  line-height: 1.4;
  border-radius: var(--radius);
}
.nav-seite:hover { color: var(--text); background: var(--grund-leise); }
.nav-seite.aktiv { color: var(--text); background: var(--flaeche); font-weight: 500; }
.nav-seite-name { flex: 1 1 auto; min-width: 0; word-break: break-word; }

/* Dritte Ebene: Unterseiten, eingerückt unter ihrer Seite */
.nav-unterseite {
  padding-left: 24px;
  font-size: 13.5px;
  position: relative;
}
.nav-unterseite::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 2px;
  bottom: 2px;
  border-left: 1px solid var(--linie-stark);
}

/* Der Zweig bleibt sichtbar verankert, solange eine Unterseite offen ist */
.nav-seite.zweig-offen { color: var(--text); font-weight: 500; }

/* Einstieg auf einer Seite, die nur Unterseiten bündelt */
.unterseiten-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.unterseite-karte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
  cursor: pointer;
}
.unterseite-karte:hover { border-color: var(--linie-stark); background: var(--grund-leise); }

.unterseite-name { font-weight: 500; font-size: 15px; }
.unterseite-lead { font-size: 13px; color: var(--text-leise); line-height: 1.5; }

.nav-leer {
  font-size: 13px;
  color: var(--text-sehr-leise);
  font-style: italic;
  padding: 2px 10px 6px;
}

.leiste-fuss { margin-top: 8px; }

/* --- Inhaltsseite ----------------------------------------------------- */

.seiten-kopf { margin-bottom: 44px; }

.seiten-titel {
  font-family: var(--schrift-titel);
  font-size: 44px;
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 12px;
}

.seiten-lead { color: var(--text-leise); font-size: 17px; font-style: italic; margin: 0; max-width: 60ch; }

/* Unter der Subline keine Linie: Sie trennt erst die Abschnitte voneinander (Michael, 2026-10-21). */
.seiten-kopf + .block { border-top: 0; padding-top: 0; }

/* Jeder Abschnitt beginnt mit einer feinen Linie über dem Titel. */
.block {
  position: relative;
  border-top: 1px solid var(--linie);
  padding: 28px 0 52px;
}

.block-kopf {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

/* Zwischentitel in Plus Jakarta Sans, nur der Seitentitel in Prata (Michael, 2026-10-21). */
.block-titel {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.block-text { max-width: 66ch; white-space: pre-wrap; margin: 0; line-height: 1.7; }

.block-notiz { font-size: 13px; color: var(--text-sehr-leise); margin: 18px 0 0; }

/* --- Anteile als Kreis neben einem Text ------------------------------- */

.text-mit-kreis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
}

.kreis { margin: 0; display: flex; align-items: center; gap: 28px; }
.kreis-bild { width: 168px; height: 168px; display: block; flex-shrink: 0; }
.kreis-kontur { stroke: var(--linie-stark); stroke-width: 1; }

.kreis-legende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: 14px;
}
.kreis-legende li {
  display: grid;
  grid-template-columns: 12px auto auto;
  gap: 10px;
  align-items: center;
}
.kreis-punkt {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(45, 42, 40, .2);
}
.kreis-anteil {
  justify-self: end;
  padding-left: 14px;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* --- Farbkacheln ------------------------------------------------------ */

/* Fünf Spalten, damit eine Palette von fünf Farben auf einer Zeile steht
   und alle Paletten der Seite dieselbe Kachelbreite haben. */
.farb-gitter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.farb-kachel {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--grund);
  position: relative;
}

.farb-flaeche { height: 96px; border-bottom: 1px solid var(--linie); }

.farb-daten { padding: 14px 14px 16px; }

.farb-name {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  word-break: break-word;
}

.farb-notiz {
  font-size: 13px;
  color: var(--text-leise);
  margin: -10px 0 12px;
  line-height: 1.4;
}

.farb-zeile {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 6px;
  align-items: baseline;
  font-size: 12.5px;
  padding: 1px 0;
}

.farb-schluessel {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-sehr-leise);
}

.farb-wert {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  word-break: break-word;
}
.farb-wert:hover { text-decoration: underline; text-underline-offset: 3px; }

.farb-eingabe {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  width: 100%;
  border: 1px solid transparent;
  background: var(--grund-leise);
  border-radius: 3px;
  padding: 1px 4px;
}
.farb-eingabe:focus { outline: none; border-color: var(--akzent); background: var(--grund); }

.farb-waehler {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(45, 42, 40, .2);
  border-radius: 4px;
  background: rgba(255, 251, 249, .9);
  cursor: pointer;
}

/* --- Dateien und Bilder ----------------------------------------------- */

.datei-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.datei-kachel {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--grund);
}

.datei-vorschau {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--grund-leise);
  border-bottom: 1px solid var(--linie);
  padding: 20px;
  overflow: hidden;
}
.datei-vorschau img { max-width: 100%; max-height: 100%; object-fit: contain; }
.datei-vorschau.karo {
  background-image:
    linear-gradient(45deg, #F0ECE9 25%, transparent 25%),
    linear-gradient(-45deg, #F0ECE9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #F0ECE9 75%),
    linear-gradient(-45deg, transparent 75%, #F0ECE9 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.datei-vorschau.dunkel { background: var(--akzent); }

.datei-endung {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--text-sehr-leise);
  text-transform: uppercase;
}

.datei-fuss { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }

/* Der Name hält immer zwei Zeilen frei. So steht die Formatzeile darunter
   in jeder Kachel auf derselben Höhe. */
.datei-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  min-height: 2.8em;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.bearbeiten .datei-name { display: block; overflow: visible; }

.datei-meta { font-size: 12px; color: var(--text-sehr-leise); font-variant-numeric: tabular-nums; }
.datei-notiz { font-size: 12px; color: var(--text-leise); line-height: 1.45; margin-top: 6px; }

.datei-aktionen { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 14px; }

.datei-laden {
  font-size: 12.5px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  padding: 4px 13px;
}
.datei-laden:hover { border-color: var(--akzent); background: var(--grund-leise); }

/* Kompakte Kacheln für Bilderblöcke: Vorschau und Name, ein Klick lädt herunter. */
.datei-gitter.kompakt { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.kompakt .datei-vorschau { height: 104px; padding: 18px; position: relative; }
.kompakt a.datei-vorschau:hover { background-color: var(--linie); }
.kompakt a.datei-vorschau::after {
  content: "↓";
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 13px;
  color: var(--text-leise);
  opacity: 0;
  transition: opacity .12s;
}
.kompakt a.datei-vorschau.dunkel::after { color: var(--akzent-text); }
.kompakt a.datei-vorschau:hover::after { opacity: 1; }
.kompakt .datei-vorschau.dunkel:hover { background: var(--text-leise); }
.kompakt .datei-fuss { padding: 8px 10px 10px; }
.kompakt .datei-name {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-leise);
  min-height: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Video ------------------------------------------------------------ */

.video-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.video-kachel { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.video-kachel video { width: 100%; display: block; background: var(--akzent); }
.video-kachel audio { width: 100%; display: block; padding: 14px; }

/* --- Schriftmuster ---------------------------------------------------- */

.schrift-muster {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 16px;
}

.schrift-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-sehr-leise);
}

.schrift-probe { line-height: 1.25; word-break: break-word; margin: 0; }
.schrift-notiz { font-size: 13px; color: var(--text-leise); margin-top: 14px; }

/* --- Bewertung: ein Zeichen und ein Wort ------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.status-knopf {
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--grund);
  padding: 2px 10px 2px 4px;
  cursor: pointer;
}
.status-knopf:hover { border-color: var(--akzent); }
.status-zeichen { display: inline-flex; }
.status-zeichen svg { display: block; }
.status-zeichen.ja circle { fill: var(--gut); }
.status-zeichen.nein circle { fill: var(--warnung); }
.status-zeichen.ausnahme circle { fill: var(--info); }

/* --- Richtig / Falsch -------------------------------------------------- */

.dosdonts-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

.dosdonts-kachel {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dosdonts-bild {
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grund-leise);
  border-bottom: 1px solid var(--linie);
}
.dosdonts-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dosdonts-fuss { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.dosdonts-text { font-size: 14px; color: var(--text-leise); line-height: 1.5; }

/* --- Farbkombinationen ------------------------------------------------- */

.kombi-liste { display: grid; gap: 14px; }

.kombi-zeile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.kombi-bild {
  aspect-ratio: 1182 / 197;
  border-radius: 4px;
  overflow: hidden;
  background: var(--grund-leise);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kombi-bild img { width: 100%; height: 100%; display: block; object-fit: cover; }

.kombi-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.kombi-farbe { font-size: 15px; font-weight: 500; }
.kombi-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-leise); max-width: 54ch; }

/* --- Knöpfe ---------------------------------------------------------- */

.knopf {
  border: 1px solid var(--linie-stark);
  background: var(--grund);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.knopf:hover { border-color: var(--akzent); }

.knopf-voll { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.knopf-voll:hover { opacity: .88; color: var(--akzent-text); }

.knopf-still { border-color: transparent; color: var(--text-leise); }
.knopf-still:hover { border-color: var(--linie-stark); }

.kopf .knopf-still { background: transparent; color: color-mix(in srgb, var(--kopf-text) 80%, transparent); }
.kopf .knopf-still:hover { background: color-mix(in srgb, var(--kopf-text) 10%, transparent); color: var(--kopf-text); border-color: color-mix(in srgb, var(--kopf-text) 50%, transparent); }

.knopf-leise {
  width: 100%;
  border-style: dashed;
  border-radius: var(--radius);
  color: var(--text-sehr-leise);
  font-size: 12.5px;
  padding: 5px 10px;
}

.knopf-winzig {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-sehr-leise);
  padding: 2px 5px;
  font-size: 13px;
  line-height: 1;
  border-radius: 3px;
}
.knopf-winzig:hover { color: var(--akzent); background: var(--grund-leise); }
.knopf-winzig.gefahr:hover { color: var(--warnung); }

.block-werkzeuge, .nav-werkzeuge { display: flex; gap: 1px; flex-shrink: 0; }

/* --- Bearbeitungsmodus ------------------------------------------------- */

.nur-bearbeiten { display: none; }
body.bearbeiten .nur-bearbeiten { display: inline-flex; }
body.bearbeiten .knopf-leise.nur-bearbeiten { display: flex; }
body.bearbeiten .nur-ansehen { display: none; }

/* Platzhalter für leere Felder, nur während der Bearbeitung */
body.bearbeiten [contenteditable="true"]:empty::before {
  content: attr(data-platzhalter);
  color: var(--text-sehr-leise);
  font-weight: 400;
  pointer-events: none;
}

[contenteditable="true"] {
  outline: none;
  border-radius: 3px;
  transition: box-shadow .12s;
}
body.bearbeiten [contenteditable="true"]:hover { box-shadow: 0 0 0 1px var(--linie-stark); }
body.bearbeiten [contenteditable="true"]:focus { box-shadow: 0 0 0 2px var(--akzent); background: var(--grund); }

body.bearbeiten .block:hover { box-shadow: -14px 0 0 -13px var(--linie-stark); }

.block-neu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  margin-top: 12px;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius);
  background: none;
  color: var(--text-leise);
  cursor: pointer;
  font-size: 13.5px;
}
.block-neu:hover { border-color: var(--akzent); color: var(--akzent); background: var(--grund-leise); }

.ablage {
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius);
  padding: 22px;
  margin-top: 12px;
  text-align: center;
  color: var(--text-leise);
  font-size: 13px;
  cursor: pointer;
  background: var(--grund-leise);
}
.ablage:hover, .ablage.bereit { border-color: var(--akzent); color: var(--akzent); background: var(--grund); }

.kachel-weg {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  background: rgba(255, 251, 249, .94);
  border: 1px solid var(--linie);
  border-radius: 3px;
}
/* Bei Farbkacheln sitzt oben rechts schon der Farbwähler. */
.farb-kachel .kachel-weg { top: 40px; }
.datei-kachel, .farb-kachel, .video-kachel, .dosdonts-kachel { position: relative; }

/* --- Schloss ----------------------------------------------------------- */

.schloss {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--kopf-text) 24%, transparent);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: color-mix(in srgb, var(--kopf-text) 80%, transparent);
  cursor: pointer;
  flex-shrink: 0;
}
.schloss:hover { border-color: color-mix(in srgb, var(--kopf-text) 70%, transparent); color: var(--kopf-text); }
body.bearbeiten .schloss { background: var(--gut); border-color: var(--gut); color: var(--akzent-text); }

/* --- Dialoge ----------------------------------------------------------- */

.dialog {
  border: 0;
  border-radius: 10px;
  padding: 28px;
  max-width: 480px;
  width: calc(100% - 32px);
  background: var(--grund);
  color: var(--text);
  box-shadow: 0 18px 60px rgba(45, 42, 40, .22);
}
.dialog::backdrop { background: rgba(45, 42, 40, .42); }
.dialog h2 { margin: 0 0 8px; font-family: var(--schrift-titel); font-size: 24px; font-weight: 400; }
.dialog-text { margin: 0 0 18px; color: var(--text-leise); font-size: 14px; }
.dialog input[type="password"] {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--grund);
}
.dialog input[type="password"]:focus { outline: none; border-color: var(--akzent); }
.dialog-fehler { color: var(--warnung); font-size: 13px; margin: 10px 0 0; }
.dialog-fuss { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.blockart-gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.blockart {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 13px 14px;
  text-align: left;
  background: var(--grund);
  cursor: pointer;
}
.blockart:hover { border-color: var(--akzent); background: var(--grund-leise); }
.blockart b { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 2px; }
.blockart span { font-size: 12px; color: var(--text-leise); line-height: 1.4; display: block; }

/* --- Kurzhinweis (Zwischenablage, Fehler) ------------------------------ */

.hinweis {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--akzent);
  color: var(--akzent-text);
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(45, 42, 40, .24);
}
.hinweis.schlecht { background: var(--warnung); }

/* --- Suchtreffer -------------------------------------------------------- */

mark { background: var(--flaeche); color: inherit; padding: 0 1px; }

.such-ergebnis { border-bottom: 1px solid var(--linie); padding: 16px 0; }
.such-ergebnis button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 16px; color: var(--text); font-weight: 500; text-align: left;
}
.such-ergebnis button:hover { text-decoration: underline; text-underline-offset: 3px; }
.such-pfad { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-sehr-leise); margin-bottom: 3px; }
.such-auszug { font-size: 13.5px; color: var(--text-leise); margin-top: 3px; }

/* --- Schmale Fenster ---------------------------------------------------- */

@media (max-width: 1100px) {
  .farb-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .kombi-zeile { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .text-mit-kreis { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 900px) {
  .rahmen { flex-direction: column; }
  .leiste {
    position: static;
    width: 100%;
    flex-basis: auto;
    height: auto;
    padding: 24px 16px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--linie);
  }
  .inhalt { padding: 28px 16px 120px; }
  .seiten-titel { font-size: 34px; }
  .kopf { padding: 12px 16px; height: auto; min-height: var(--kopf-hoehe); flex-wrap: wrap; gap: 12px; }
  .kopf-titel { padding-left: 14px; }
  .suche { width: 150px; }
  .leiste { top: 0; }
}

@media (max-width: 600px) {
  .farb-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kreis { flex-direction: column; align-items: flex-start; }
}

@media print {
  .leiste, .kopf-werkzeuge, .block-neu, .block-werkzeuge { display: none !important; }
  .inhalt { max-width: none; padding: 0; }
}

/* --- Formatierter Text ------------------------------------------------- */
/* Absätze, Aufzählungen und Fettes aus dem Klartext (app.js, formatiere). */

.formatiert { white-space: normal; }
.formatiert p { margin: 0 0 14px; }
.formatiert p:last-child, .formatiert ul:last-child { margin-bottom: 0; }
.formatiert ul { margin: 0 0 14px; padding-left: 20px; }
.formatiert li { margin: 0 0 6px; padding-left: 4px; }
.formatiert li::marker { color: var(--akzent); }
.formatiert strong { font-weight: 600; }

/* --- Personas ---------------------------------------------------------- */

.personen-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.person-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
  overflow: hidden;
}

.person-bild {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--flaeche);
  display: flex;
  align-items: center;
  justify-content: center;
}
.person-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.person-prio {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--grund);
  color: var(--text);
}

.person-kopf { padding: 18px 20px 0; }
.person-name-zeile { display: flex; align-items: baseline; gap: 8px; }
.person-name { font-family: var(--schrift-titel); font-size: 26px; font-weight: 400; margin: 0; }
.person-alter { color: var(--text-sehr-leise); font-size: 15px; }
.person-rolle { font-weight: 600; margin-top: 4px; }
.person-ort { color: var(--text-leise); font-size: 13.5px; margin-top: 2px; }

.person-zitat {
  margin: 14px 20px 0;
  padding-left: 12px;
  border-left: 2px solid var(--akzent);
  font-style: italic;
  color: var(--text-leise);
  font-size: 14.5px;
}

.person-merkmale { margin: 16px 20px 20px; font-size: 14px; line-height: 1.5; }
.person-merkmale dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-sehr-leise);
  margin-top: 10px;
}
.person-merkmale dt:first-child { margin-top: 0; }
.person-merkmale dd { margin: 2px 0 0; }
.person-punkte { margin: 14px 20px 20px; white-space: pre-wrap; font-size: 13.5px; }

/* Beispiele ohne Bild: Falsch links, Richtig rechts. */
.dosdonts-gitter.paare { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }

/* --- Icons mit Wort ---------------------------------------------------- */

.symbol-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.symbol {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 12px 20px;
  border-radius: var(--radius);
  background: var(--flaeche);
  text-align: center;
}
.symbol-bild { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.symbol-bild img { width: 100%; height: 100%; object-fit: contain; }
.symbol-wort { font-weight: 600; font-size: 15px; }

/* Personas untereinander: Bild links, Beschreibung rechts (Michael, 2026-10-21). */
.personen-gitter { grid-template-columns: 1fr; gap: 20px; }
.person-karte {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-auto-rows: min-content;
  column-gap: 8px;
}
.person-bild { grid-column: 1; grid-row: 1 / span 4; aspect-ratio: 4 / 5; align-self: start; }
.person-karte > :not(.person-bild):not(.kachel-weg) { grid-column: 2; }
.person-kopf { padding: 22px 24px 0; }
.person-zitat { margin: 12px 24px 0; }
.person-merkmale {
  margin: 14px 24px 22px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 6px;
}
.person-merkmale dt { margin-top: 2px; }
.person-merkmale dd { margin: 0; }
.person-punkte { margin: 14px 24px 22px; }
@media (max-width: 760px) {
  .person-karte { grid-template-columns: 1fr; }
  .person-bild, .person-karte > :not(.person-bild):not(.kachel-weg) { grid-column: 1; grid-row: auto; }
}

/* Text mit Bildern links, etwa das Logo auf hellem und dunklem Grund. */
.text-mit-bildern { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 40px; align-items: start; }
.bild-stapel { display: flex; flex-direction: column; gap: 12px; }
.bild-stapel-feld {
  margin: 0;
  padding: 36px 32px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bild-stapel-feld.dunkel { background: var(--akzent); border-color: var(--akzent); }
.bild-stapel-feld img { width: 100%; max-height: 110px; object-fit: contain; display: block; }
@media (max-width: 760px) { .text-mit-bildern { grid-template-columns: 1fr; } }
/* Rechte Spalte: Titel über dem Text, senkrecht zu den Bildern eingemittelt. */
.text-mit-bildern { align-items: center; }
.text-mit-bildern-rechts .block-titel { margin-bottom: 16px; }
.block-kopf:has(> div.block-titel:empty:only-child) { display: none; }

/* Text mit einem Bild rechts in derselben Höhe. */
.text-mit-bild-rechts { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 40px; align-items: stretch; }
.bild-rechts { margin: 0; position: relative; min-height: 260px; border-radius: var(--radius); overflow: hidden; }
.bild-rechts img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .text-mit-bild-rechts { grid-template-columns: 1fr; } .bild-rechts { aspect-ratio: 4 / 3; } }

/* Farbgruppe mit ihrer Regel über den Kacheln (Michael, 2026-10-22). */
.farb-erklaerung { margin-bottom: 20px; }

/* Farbkombinationen: Bewertung als Randstreifen und gefüllte Marke, damit
   empfohlen und nicht empfohlen auf einen Blick auseinandergehen (Michael, 2026-10-22). */
.kombi-zeile { padding: 6px 0 6px 18px; border-left: 4px solid var(--linie-stark); }
.kombi-zeile.ja { border-left-color: var(--gut); }
.kombi-zeile.ausnahme { border-left-color: var(--info); }
.kombi-zeile.nein { border-left-color: var(--warnung); }
.status.status-pille {
  padding: 3px 12px 3px 4px;
  border: 0;
  border-radius: 999px;
  color: var(--grund);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.status-pille.ja { background: var(--gut); }
.status-pille.ausnahme { background: var(--info); }
.status-pille.nein { background: var(--warnung); }
.status-pille .status-zeichen circle { fill: var(--grund); }
.status-pille.ja .status-zeichen g { stroke: var(--gut); }
.status-pille.ausnahme .status-zeichen g { stroke: var(--info); }
.status-pille.nein .status-zeichen g { stroke: var(--warnung); }

/* Platzhalter: Was fehlt, steht gestrichelt da und sagt «folgt». */
.platzhalter-text {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-sehr-leise);
}
.datei-kachel.platzhalter { border-style: dashed; border-color: var(--linie-stark); }
.datei-vorschau.leer,
.logo-vorschau.leer {
  background: repeating-linear-gradient(45deg, var(--grund-leise), var(--grund-leise) 10px, var(--grund) 10px, var(--grund) 20px);
}

/* Logo mit Formaten: eine Kachel je Logo, die Formate als Knöpfe darunter. */
.logo-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .logo-gitter { grid-template-columns: 1fr; } }
.logo-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--grund);
}
.logo-vorschau {
  height: 240px;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grund-leise);
  border-bottom: 1px solid var(--linie);
}
/* Füllt die Fläche: SVG aus CorelDRAW tragen Millimeter-Masse und blieben sonst winzig. */
.logo-vorschau img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-vorschau.dunkel { background: var(--akzent); }
.logo-fuss { padding: 14px 16px 16px; display: grid; gap: 10px; }
.logo-name { font-size: 15px; font-weight: 500; }
.format-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.format-knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--grund);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
}
a.format-knopf:hover, button.format-knopf:hover { border-color: var(--akzent); background: var(--grund-leise); }
button.format-knopf { cursor: pointer; }
.format-knopf.fehlt { border-style: dashed; color: var(--text-sehr-leise); font-weight: 500; }
.format-folgt { font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.format-pfeil { font-weight: 400; }
.format-bearbeiten { display: inline-flex; align-items: center; gap: 2px; }

/* Schriftfamilie nach dem Vorbild von Frontify: je Schnitt «Aa», Alphabet, Angaben. */
.familie-etikett {
  display: inline-block;
  margin-bottom: 14px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--akzent);
  color: var(--akzent-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.familie-felder { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.familie-text { margin-bottom: 18px; }
.familie-schnitte { border-top: 1px solid var(--linie); }
.familie-schnitt {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 210px;
  gap: 28px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--linie);
}
.familie-aa { font-size: 84px; line-height: 1; color: var(--text); }
.familie-alphabet { font-size: 18px; line-height: 1.55; color: var(--text-leise); overflow-wrap: anywhere; }
.familie-angaben {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 20px;
  border-left: 1px solid var(--linie-stark);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-leise);
}
.familie-angabe-name { color: var(--text); font-weight: 500; }
.familie-abschnitt { margin-top: 26px; }
.familie-zwischentitel { margin: 0 0 12px; font-family: var(--schrift); font-size: 15px; font-weight: 600; }
.code-feld { margin-bottom: 12px; border: 1px solid var(--linie-stark); border-radius: var(--radius); overflow: hidden; }
.code-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: var(--grund-leise);
  border-bottom: 1px solid var(--linie);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}
.code-kopieren { border: 0; background: none; font: inherit; font-weight: 500; color: var(--text-leise); cursor: pointer; }
.code-kopieren:hover { color: var(--text); }
.code-inhalt {
  margin: 0;
  padding: 12px 14px;
  background: var(--grund);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .familie-schnitt { grid-template-columns: 1fr; gap: 10px; }
  .familie-angaben { padding-left: 0; border-left: 0; }
}

/* Stufe der Hierarchie (H1, Fliesstext …) vorne im Kopf eines Schriftmusters. */
.schrift-stufe { color: var(--text); font-weight: 700; }

/* Logo mit Formaten, kompakt: viele kleine Kacheln, etwa die Icons (Michael, 2026-10-22). */
.logo-gitter.kompakt { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.kompakt .logo-vorschau { height: 116px; padding: 18px; }
.kompakt .logo-fuss { padding: 10px 12px 12px; gap: 8px; }
.kompakt .logo-name { font-size: 13.5px; }
.kompakt .format-leiste { gap: 6px; }
.kompakt .format-knopf { padding: 3px 9px; font-size: 11px; letter-spacing: .03em; }

/* Vermerk «Unbearbeitet» unter dem Seitentitel (Michael, 2026-10-22). */
.seiten-vermerk {
  display: inline-block;
  margin: 0 0 12px;
  padding: 3px 12px;
  border: 1px dashed var(--linie-stark);
  border-radius: 999px;
  background: var(--grund-leise);
  color: var(--text-leise);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
button.seiten-vermerk { cursor: pointer; }
button.seiten-vermerk.aus { opacity: .45; }

/* Navigation: rundes Produktbild vor dem Namen, leiser Vermerk «unbearbeitet» dahinter
   (Michael, 2026-10-22). */
.nav-symbol {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--linie);
  background: var(--grund);
}
.nav-vermerk {
  flex: 0 0 auto;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--warnung);
  opacity: .8;
}

/* Tabelle (Produktarten: Steckbrief, Stärken, Einwände, Textbausteine). */
.tabelle-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); }
.inhalt-tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.inhalt-tabelle th {
  text-align: left;
  padding: 10px 14px;
  background: var(--grund-leise);
  border-bottom: 1px solid var(--linie-stark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.inhalt-tabelle td { padding: 10px 14px; border-top: 1px solid var(--linie); vertical-align: top; }
.inhalt-tabelle tr:first-child td { border-top: 0; }
.inhalt-tabelle td:first-child { font-weight: 500; }
.tabelle-quelle { font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; max-width: none; }

/* Kundenstimmen */
.stimmen-links { margin-bottom: 18px; }
.stimmen-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.stimme {
  position: relative;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stimme-sterne { color: var(--orange, #D77C36); letter-spacing: .12em; font-size: 14px; }
.stimme-text { margin: 0; font-size: 15px; line-height: 1.6; }
.stimme-quelle { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 12.5px; color: var(--text-sehr-leise); margin-top: auto; }
.stimme-quelle strong { color: var(--text); font-weight: 600; }

/* Produktarten: Kacheln mit Bild je Produktwelt; das Band mit den Inhalten öffnet sich unter
   der gewählten Kachel über die ganze Breite (Michael, 2026-10-22). */
.art-welt {
  margin: 28px 0 12px;
  font-family: var(--schrift);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-sehr-leise);
}
.art-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  grid-auto-flow: row dense;
  gap: 12px;
}
.art-kachel {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--text);
}
.art-kachel:hover { border-color: var(--linie-stark); }
.art-kachel.offen { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
.art-kachel.leer .art-name { color: var(--text-leise); }
.art-bild { display: block; aspect-ratio: 1 / 1; background: var(--grund-leise); }
.art-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-name { padding: 8px 10px 10px; font-size: 13px; line-height: 1.35; }
.art-band {
  grid-column: 1 / -1;
  position: relative;
  margin: 4px 0 8px;
  padding: 26px 30px 10px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--grund);
}
.art-band-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.art-band-titel { margin: 0; flex: 1 1 auto; font-family: var(--schrift-titel); font-weight: 400; font-size: 32px; }
.art-zu { font-size: 20px; }
.art-band .block:first-of-type { margin-top: 18px; }