/* PageSetter - Oberflaeche */

/* =====================================================================
   Markenbild PageSetter

   Eine Marke, zwei Orte: die Oberfläche und das gesetzte Blatt. Beide
   teilen sich Schrift, Farbklima, Rundungen und Schatten.

   Grundlage ist warmes Papier statt kaltem Weiß, eine Renaissance-Antiqua
   (Cormorant Garamond) für alles Geschriebene und ein zurückhaltendes Braun als
   einzige Akzentfarbe. Keine Signalfarben, keine harten Schatten.
   ===================================================================== */

/* Die vier Schnitte der Hausschrift stehen ausschliesslich in satz.css.
   Wuerden sie hier zusaetzlich stehen, koennten Editor und Vorschau
   unterschiedliche Schnitte auswaehlen - genau das war frueher der Fall.
   satz.css wird von jeder Vorlage, die studio.css laedt, ausdruecklich
   mitverlinkt; ein @import hier haette sie im Editor ein zweites Mal geladen. */

@font-face {
  font-family: "Open Sans Local";
  src: url("/static/fonts/open-sans-latin.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans Local";
  src: url("/static/fonts/open-sans-latin-ext.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans Local";
  src: url("/static/fonts/open-sans-italic-latin.woff2") format("woff2");
  font-weight: 300 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans Local";
  src: url("/static/fonts/open-sans-italic-latin-ext.woff2") format("woff2");
  font-weight: 300 800; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  /* ------------------------------------------------------ helles Papier */
  --flaeche: #f2efe9;          /* Hintergrund der Anwendung */
  --weiss: #fbf9f5;            /* Karten, Leisten, Dialoge */
  --text: #2a2622;
  --text-leise: #7c7268;
  --rand: #e5ded1;
  --rand-stark: #d4c9b6;

  /* Akzent: ein ruhiges Braun statt eines Signalblaus. Die Variablennamen
     bleiben, damit alle bestehenden Regeln weiter greifen. */
  --blau: #8b7757;
  --blau-tief: #6f5f45;
  --blau-flaeche: #efe9de;
  --blau-rand: #cdbfa6;

  --rot: #a4584a;
  --gruen: #5f7355;
  --gelb: #f4ecd8;

  --radius: 12px;
  --radius-klein: 8px;
  --schatten: 0 1px 2px rgba(58, 48, 36, .04), 0 6px 18px rgba(58, 48, 36, .05);
  --schatten-tief: 0 2px 6px rgba(58, 48, 36, .07), 0 16px 40px rgba(58, 48, 36, .10);

  --schrift: "Open Sans Local", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-anzeige: "PageSetter", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --schrift-mono: "SF Mono", "Consolas", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font-family: var(--schrift);
  color: var(--text);
  background: var(--flaeche);
  font-size: 16px;
  line-height: 1.5;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

.app {
  display: grid;
  grid-template-columns: 72px 296px minmax(0, 1fr) 320px;
  grid-template-rows: 64px minmax(0, 1fr);
  grid-template-areas:
    "werkzeugleiste blattkopf    kopfzeile      kopfzeile"
    "werkzeugleiste seitenleiste arbeitsflaeche begleiter";
  height: 100vh;
  overflow: hidden;
}
.app[data-ansicht="start"] {
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas:
    "werkzeugleiste kopfzeile"
    "werkzeugleiste arbeitsflaeche";
}
/* Der Begleiter gehört zum Projekt - außerhalb des Editors ist er weg. */
.app:not([data-ansicht="editor"]) .begleiter { display: none; }
.app[data-ansicht="start"] .seitenkopf,
.app[data-ansicht="start"] .seitenleiste { display: none; }

/* ------------------------------------------------------------- Werkzeugleiste */

.leiste {
  grid-area: werkzeugleiste;
  background: var(--weiss);
  border-right: 1px solid var(--rand);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; gap: 6px; overflow-y: auto;
}
.leiste .marke {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--blau); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 19px;
  margin-bottom: 8px; flex: none; letter-spacing: -.02em;
}
.werkzeug {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: none; border-radius: 10px;
  color: var(--text-leise);
}
.werkzeug:hover { background: var(--flaeche); color: var(--text); }
.werkzeug.aktiv { background: var(--blau-flaeche); color: var(--blau); }
.werkzeug svg { width: 21px; height: 21px; }
.werkzeug[disabled] { opacity: .35; cursor: default; }
.werkzeug[disabled]:hover { background: transparent; color: var(--text-leise); }
.leiste .unten { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }

/* ------------------------------------------------------------------ Sidebar */

.seitenkopf {
  grid-area: blattkopf;
  background: var(--weiss);
  border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
  display: flex; align-items: center; gap: 8px; padding: 0 18px;
}
.seitenkopf h2 { font-size: 18px; font-weight: 600; margin: 0; }
.seitenkopf .hinweisknopf {
  margin-left: auto; background: none; border: none; color: var(--text-leise);
  display: grid; place-items: center;
}

.seitenleiste {
  grid-area: seitenleiste;
  background: var(--weiss); border-right: 1px solid var(--rand);
  overflow-y: auto; min-height: 0; padding: 16px;
}
.werkzeugblatt { display: none; }
.werkzeugblatt.aktiv { display: block; }

.gruppentitel {
  font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-leise); margin: 18px 0 9px;
}
.gruppentitel:first-child { margin-top: 0; }

/* Die Chips ueber dem Suchfeld: Wonach handelt die Vorlage? Das ist der
   Weg, auf dem die meisten suchen - nicht nach einem Namen, sondern danach,
   was auf die Seite soll. */
.merkmalsleiste {
  display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px;
}
.merkmalschip {
  border: 1px solid var(--rand); background: var(--flaeche, #fff);
  color: var(--text-leise); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; line-height: 1.5;
  cursor: pointer;
}
.merkmalschip:hover { color: var(--blau); border-color: var(--blau-rand); }
.merkmalschip.gesetzt {
  background: var(--blau); border-color: var(--blau); color: #fff;
}

/* Eine Zeile, die sagt, wofuer die Gruppe da ist. Sie steht direkt
   unter dem Titel und nimmt dessen Versalien nicht mit. */
.gruppenbeisatz {
  font-size: 12px; line-height: 1.45; color: var(--text-leise);
  margin: -5px 0 10px; text-transform: none; letter-spacing: 0;
  font-weight: 400;
}

/* Zwei Vorlagen nebeneinander, immer. Lieber kleiner als waagerecht rollen:
   eine Leiste, in der man seitwärts scrollen muss, findet niemand. */
.vorlagengitter {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; min-width: 0;
}
.vorlagenkarte { min-width: 0; }
.vorlagenkarte .blattbild { max-width: 100%; height: auto; }
.seitenleiste { overflow-x: hidden; }

.vorlagenkarte {
  border: 1.5px solid var(--rand); border-radius: var(--radius);
  padding: 8px; background: var(--weiss); cursor: grab;
  transition: border-color .12s, box-shadow .12s;
}
.vorlagenkarte:hover { border-color: var(--blau-rand); box-shadow: 0 2px 8px rgba(37,99,235,.10); }
.vorlagenkarte svg { width: 100%; display: block; border-radius: 3px; }
.vorlagenkarte .covervorschau {
  width: 100%; display: block; aspect-ratio: 210 / 297; object-fit: contain;
  object-position: center; border-radius: 3px; background: var(--flaeche);
}
.vorlagenkarte .name {
  font-size: 13px; color: var(--text-leise); text-align: center; margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Mehrseiten-Vorlagen gehoeren gestalterisch zur Vorlagenleiste, brauchen
   aber mehr Erklaerung als eine einzelne Miniaturseite. */
.bundlegitter { display: grid; gap: 10px; min-width: 0; }
.bundletitel { color: var(--akzent-dunkel, #7a6648); }
.bundlekarte {
  cursor: pointer; display: grid; grid-template-columns: 66px minmax(0, 1fr) 12px;
  align-items: center; gap: 11px; padding: 10px;
  background: linear-gradient(135deg, var(--weiss), var(--flaeche));
}
.bundlekarte:focus-visible {
  outline: none; border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.bundlekarte .bundlebild { width: 66px; height: auto; }
.bundlekarteninhalt { min-width: 0; display: grid; gap: 2px; }
.bundlekarteninhalt strong { font-size: 15px; font-weight: 700; color: var(--text); }
.bundlekarteninhalt span { font-size: 12.5px; font-weight: 600; color: #8b7757; }
.bundlekarteninhalt small {
  font-size: 12.5px; line-height: 1.35; color: var(--text-leise);
}
.bundlepfeil { color: #8b7757; font-size: 24px; line-height: 1; }

.bausteinliste { display: grid; gap: 10px; }
.baustein {
  border: 1.5px solid var(--rand); border-radius: var(--radius);
  padding: 11px 13px; background: var(--weiss); cursor: grab;
  display: flex; gap: 11px; align-items: center;
}
.baustein:hover { border-color: var(--blau-rand); }
.baustein .form { flex: none; color: var(--blau); display: grid; place-items: center; }
.baustein .form svg { width: 30px; height: 26px; }
.baustein b { display: block; font-size: 15px; font-weight: 600; }
.baustein span { font-size: 13.5px; color: var(--text-leise); line-height: 1.35; }

.mediathek { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mediathek .leiseinfo { grid-column: 1 / -1; }
.medienkachel {
  position: relative; border: 1.5px solid var(--rand); border-radius: var(--radius);
  overflow: hidden; background: var(--flaeche); cursor: grab; aspect-ratio: 4 / 3;
}
.medienkachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.medienkachel:hover { border-color: var(--blau-rand); }
.medienkachel .weg {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border-radius: 6px; border: none; background: rgba(17,24,39,.72); color: #fff;
  font-size: 15px; line-height: 1; display: none; place-items: center;
}
.medienkachel:hover .weg { display: grid; }

.hinweiskasten {
  margin-top: 16px; padding: 12px 14px; background: var(--flaeche);
  border-radius: var(--radius); display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: var(--text-leise); line-height: 1.5;
}
.hinweiskasten svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.hinweiskasten b { color: var(--text); font-weight: 600; }
.leiseinfo { font-size: 14.5px; color: var(--text-leise); line-height: 1.55; }

/* ------------------------------------------------------------------- Kopfzeile */

.kopfzeile {
  grid-area: kopfzeile; background: var(--weiss);
  border-bottom: 1px solid var(--rand);
  display: flex; align-items: center; gap: 10px; padding: 0 18px; min-width: 0;
}
.zurueckknopf {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px;
  border-radius: var(--radius); border: 1px solid var(--rand); background: var(--weiss);
  font-size: 15px; color: var(--text-leise); flex: none;
}
.zurueckknopf:hover { background: var(--flaeche); color: var(--text); }
.zurueckknopf svg { width: 15px; height: 15px; }

.wortmarke { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.wortmarke span { color: var(--blau); }

.dokumenttitel {
  font-size: 18px; font-weight: 600; border: none; background: transparent;
  padding: 5px 6px; border-radius: 6px; min-width: 90px; flex: 0 1 auto;
  text-overflow: ellipsis;
}
.dokumenttitel:hover { background: var(--flaeche); }
.dokumenttitel:focus { outline: 2px solid var(--blau); background: var(--weiss); }
.stiftmarke { color: var(--text-leise); display: grid; place-items: center; flex: none; }
.stiftmarke svg { width: 15px; height: 15px; }
.kennmarke {
  font-size: 13.5px; color: var(--text-leise); white-space: nowrap;
  border: 1px solid var(--rand); border-radius: 999px; padding: 3px 10px; flex: none;
}
.kopfzeile .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.sicherungsstand { font-size: 14px; color: var(--text-leise); margin-right: 4px; white-space: nowrap; }

/* --------------------------------------------------------------------- Knoepfe */

.knopf {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--rand); background: var(--weiss);
  font-size: 15.5px; font-weight: 500; white-space: nowrap;
}
.knopf:hover { background: var(--flaeche); }
.knopf svg { width: 16px; height: 16px; flex: none; }
.knopf.voll { background: var(--blau); border-color: var(--blau); color: #fff; }
.knopf.voll:hover { background: var(--blau-tief); }
.knopf.gefahr { color: var(--rot); border-color: #f3c4c4; }
.knopf.gefahr:hover { background: #fef2f2; }
.knopf.rund { padding: 8px; }
.knopf.klein { padding: 5px 10px; font-size: 14.5px; }
.knopf:disabled { opacity: .42; cursor: default; }
.knopf:disabled:hover { background: var(--weiss); }
.knopf.voll:disabled:hover { background: var(--blau); }

.aufklapp { position: relative; display: inline-flex; }
.aufklapp .flaeche {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(17,24,39,.13); min-width: 244px; padding: 6px; z-index: 30;
}
.aufklapp .flaeche[hidden] { display: none; }
.aufklapp .flaeche button {
  display: block; width: 100%; text-align: left; padding: 9px 11px;
  border: none; background: none; border-radius: 6px; font-size: 15.5px;
}
.aufklapp .flaeche button:hover { background: var(--flaeche); }
.aufklapp .flaeche button small {
  display: block; color: var(--text-leise); font-size: 13.5px; margin-top: 2px;
}
.aufklapp .flaeche hr { border: none; border-top: 1px solid var(--rand); margin: 5px 0; }
.exportknopf, .speicherknopf { border-radius: var(--radius) 0 0 var(--radius); }
.pfeilknopf {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left-color: rgba(255,255,255,.35); padding: 8px 9px;
}
.speichergruppe .speicherpfeil { border-left-color: var(--rand); }

/* -------------------------------------------------------------- Arbeitsflaeche */

.arbeitsflaeche {
  grid-area: arbeitsflaeche; overflow-y: auto; min-height: 0;
  /* Oben Luft: Die erste Zeile des Blattes soll nicht an der Kopfleiste kleben. */
  padding: 20px 28px 90px;
}

/* ------------------------------------------------------------ Startbildschirm */

.startbereich { max-width: 1080px; margin: 0 auto; padding: 26px 0 40px; }
.startkopf { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.startkopf h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: -.01em; }
.startkopf p { margin: 0; color: var(--text-leise); font-size: 15.5px; }
.startkopf .rechts { margin-left: auto; display: flex; gap: 8px; }

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

.projektkarte {
  background: var(--weiss); border: 1px solid var(--rand); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .12s, box-shadow .12s;
}
.projektkarte:hover { border-color: var(--blau-rand); box-shadow: 0 4px 14px rgba(17,24,39,.07); }
.projektkarte .blattbild {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 4px;
  width: 46px; flex: none; display: grid; place-items: center;
  color: var(--text-leise); font-size: 11px;
}
.projektkarte .oben { display: flex; gap: 13px; align-items: flex-start; }
.projektkarte h3 {
  margin: 0 0 4px; font-size: 17.5px; font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere;
}
.projektkarte .angaben { font-size: 14.5px; color: var(--text-leise); line-height: 1.5; }
.projektkarte .werkzeuge { display: flex; gap: 8px; margin-top: auto; }
.projektkarte .werkzeuge .knopf { flex: 1; justify-content: center; }
.projektkarte .werkzeuge .knopf.gefahr { flex: none; }

.leerbereich {
  background: var(--weiss); border: 1px dashed var(--rand-stark); border-radius: 12px;
  padding: 48px 24px; text-align: center; color: var(--text-leise);
}
.leerbereich h3 { color: var(--text); font-size: 20px; margin: 0 0 8px; }
.leerbereich p { margin: 0 auto 16px; max-width: 460px; line-height: 1.6; }

/* --------------------------------------------------------------- Seitenreiter */

.seitenreiter {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 12; padding: 16px 0 14px;
  background: linear-gradient(var(--flaeche) 78%, rgba(243,244,246,0));
}
.seitenreiter button {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--rand);
  background: var(--weiss); font-size: 15px; color: var(--text-leise);
}
.seitenreiter button.aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }
.seitenreiter .zufuegen { color: var(--blau); font-weight: 500; }

.zoomgruppe {
  margin-left: auto; display: flex; align-items: center; gap: 4px;
  background: var(--weiss); border: 1px solid var(--rand); border-radius: 999px; padding: 3px;
}
.zoomgruppe button {
  border: none; background: none; padding: 4px 10px; border-radius: 999px;
  font-size: 14.5px; color: var(--text-leise);
}
.zoomgruppe button:hover { background: var(--flaeche); color: var(--text); }
.zoomgruppe .stand {
  font-size: 14px; color: var(--text-leise); min-width: 42px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- Das Blatt */

/* Die Buehne haelt den Platz frei, den das skalierte Blatt einnimmt.
   transform:scale() aendert den Platzbedarf im Fluss nicht, deshalb setzt
   studio.js hier Hoehe und Breite in Bildschirmpunkten. */
.blattbuehne {
  display: flex; justify-content: center;
  width: 100%;
}

/* Das Blatt traegt immer die echten Millimetermasse des Formats; --mm bleibt
   1mm wie im Druck. Skaliert wird ausschliesslich die Darstellung. Dadurch
   entsteht der Umbruch in derselben Geometrie wie in Vorschau, Druck und PDF.

   Kein border: bei box-sizing:border-box zoege ein Rahmen zwei Pixel vom
   Inhalt ab und verfaelschte damit den Satzspiegel. Die Blattkante zeichnet
   deshalb ein box-shadow, das die Box nicht antastet. */
.blatt {
  background: var(--weiss); border: none; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--rand-stark), 0 2px 10px rgba(17,24,39,.08);
  position: relative; overflow: hidden;
  flex: none;
  transform: scale(var(--blatt-skala, 1));
  transform-origin: top center;
}
.blatt.abwurf { box-shadow: 0 0 0 3px var(--blau), 0 2px 10px rgba(17,24,39,.08); }

/* Der Satzspiegel steht in satz.css - dort, wo Editor, Vorschau und Ausgabe
   ihn gemeinsam lesen. Hier stand er frueher ein zweites Mal. */

.blattleer {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; color: var(--text-leise); padding: 30px;
}
.blattleer h3 { color: var(--text); font-size: 19px; margin: 0 0 6px; }
.blattleer p { margin: 0; font-size: 15px; line-height: 1.55; }

/* ---------------------------------------------------------------------- Bloecke */

.block { position: relative; min-height: 0; display: flex; flex-direction: column; }
.block.markiert > .blockwerkzeuge { display: flex; }

.blockwerkzeuge {
  position: absolute; top: 4px; right: 4px; z-index: 8; display: none; gap: 4px;
}
.block:hover > .blockwerkzeuge { display: flex; }
.blockwerkzeuge button {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--rand);
  background: rgba(255,255,255,.95); color: var(--text-leise);
  display: grid; place-items: center; padding: 0;
}
.blockwerkzeuge button:hover { color: var(--blau); border-color: var(--blau-rand); }
.blockwerkzeuge svg { width: 13px; height: 13px; }

/* Cover-Werkzeuge erscheinen nur im Editor und fehlen damit in jeder Ausgabe. */
.blatt.coverseite .satzspiegel { inset: 0; gap: 0; }
.blatt .covertext {
  outline: none; border-radius: 3px; min-width: 1.5em;
}
.blatt .covertext:focus {
  box-shadow: 0 0 0 2px rgba(37,99,235,.8), 0 0 0 5px rgba(255,255,255,.7);
  background: rgba(255,255,255,.08);
}
.blatt .covertext:empty::before {
  content: attr(data-platzhalter); opacity: .65; font-family: var(--groteske);
  font-size: .45em; letter-spacing: normal;
}
.blatt .coverelement[data-cover-zu-lang]::after {
  content: "Text ist für diesen Bereich zu lang";
  position: absolute; left: 50%; bottom: 2px; z-index: 7;
  transform: translateX(-50%); padding: 2px 6px; border-radius: 4px;
  color: #fff; background: rgba(164,88,74,.92);
  font: 600 11px/1.2 var(--schrift); letter-spacing: normal;
  text-transform: none; white-space: nowrap; pointer-events: none;
}
.coverelementwerkzeuge {
  position: absolute; top: -28px; right: 0; z-index: 12;
  display: none; align-items: center; gap: 4px;
}
.coverelement:hover > .coverelementwerkzeuge,
.coverelement:focus-within > .coverelementwerkzeuge { display: flex; }
.coverelementwerkzeuge > button {
  position: relative; width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.62);
  border-radius: 6px; color: #fff; background: rgba(17,24,39,.88);
  box-shadow: 0 2px 8px rgba(17,24,39,.2);
}
.coverelementwerkzeuge > button:hover { background: var(--blau); }
.coverelementwerkzeuge > button svg { width: 13px; height: 13px; }
.coverfarbknopf > span {
  position: absolute; width: 7px; height: 7px; right: 2px; bottom: 2px;
  border: 1px solid #fff; border-radius: 50%;
}
.coverfarbpopover {
  position: absolute; top: 29px; right: 0; width: 176px; z-index: 20;
  padding: 10px; border: 1px solid var(--rand); border-radius: 9px;
  background: var(--weiss); color: var(--text); box-shadow: 0 12px 30px rgba(17,24,39,.22);
}
.coverfarbpopover[hidden] { display: none; }
.coverfarbpopover strong {
  display: block; margin-bottom: 7px; font: 600 14px/1.2 var(--schrift);
}
.coverfarbpopover input[type="color"] {
  width: 100%; height: 30px; padding: 2px; border: 1px solid var(--rand);
  border-radius: 6px; background: var(--weiss); cursor: pointer;
}
.coverfarbpalette { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 8px; }
.coverfarbpalette button {
  width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(17,24,39,.2);
  padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.blatt .covermotiv.standardbild::after {
  content: "Beispielmotiv · zum Austauschen anklicken";
  position: absolute; left: 8px; bottom: 42px; z-index: 5;
  padding: 4px 7px; border-radius: 5px; background: rgba(17,24,39,.72); color: #fff;
  font: 500 12px/1.25 var(--schrift); pointer-events: none;
}
.blatt .covermotiv .bildwerkzeuge { z-index: 15; }
.blatt .covermotiv .bildwerkzeuge svg { width: 13px; height: 13px; }

.panel.markiert { outline: 2px solid var(--blau); outline-offset: 1px; }

/* -------------------------------------------------------------------- Bildfeld */

/* Die Bildflaeche gehoert dem Satz - Hoehe, Rahmen und Aussenabstand kommen
   aus satz.css. Hier steht nur, was der Bearbeitung dient, und zwar so, dass
   es die Box nicht antastet: outline statt border (kein Platzbedarf),
   kein margin, und der Ablageplatzhalter liegt absolut ueber der Flaeche
   statt in ihr. Frueher baute er mit Wolke, Knopf und Formatangabe rund
   170 Pixel Hoehe auf, die es in Vorschau und Ausgabe nicht gab: eine leere
   Bildflaeche drueckte den Text im Editor zusammen, eine gefuellte fiel
   zusammen und gab ihm zu viel Raum. Beides verschob den Umbruch. */
.bildfeld {
  background: var(--blau-flaeche);
  outline: 1.5px dashed var(--blau-rand); outline-offset: -1.5px;
  border-radius: 3px; text-align: center;
}
.bildfeld.gefuellt { outline: none; background: #eceef2; cursor: grab; }
.bildfeld.gefuellt.zieht { cursor: grabbing; }
.bildfeld.hover { background: #e3edff; outline-color: var(--blau); }
.panel > .bildfeld { border-radius: 0; }

.bildfeld img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; user-select: none; -webkit-user-drag: none;
}
/* Absolut ueber der Flaeche: der Platzhalter zeigt an, wohin ein Bild
   gehoert, und darf dabei keinen Millimeter Satz verbrauchen. */
.bildfeld .ablage {
  position: absolute; inset: 0; margin: auto; height: max-content;
  display: grid; place-items: center; align-content: center;
  padding: 10px; max-width: 100%; pointer-events: auto;
}
.bildfeld .wolke { color: var(--blau); }
.bildfeld .wolke svg { width: 26px; height: 26px; }
.bildfeld .haupt { font-size: 14.5px; font-weight: 500; margin-top: 4px; }
.bildfeld .oder { font-size: 13px; color: var(--text-leise); margin: 2px 0 6px; }
.bildfeld .waehlen {
  border: 1px solid var(--rand); background: var(--weiss); color: var(--blau);
  font-size: 14px; font-weight: 600; padding: 5px 11px; border-radius: 6px;
}
.bildfeld .waehlen:hover { background: var(--blau-flaeche); }
.bildfeld .format {
  font-size: 12.5px; color: var(--text-leise); margin-top: 7px; line-height: 1.4;
}
.bildfeld .format b { color: var(--text); font-weight: 600; }

.bildwerkzeuge {
  position: absolute; left: 5px; bottom: 5px; z-index: 6; display: none; gap: 4px;
  background: rgba(17,24,39,.78); border-radius: 7px; padding: 3px;
}
.bildfeld.gefuellt:hover .bildwerkzeuge { display: flex; }
.bildwerkzeuge button {
  width: 22px; height: 22px; border: none; background: none; color: #fff;
  border-radius: 5px; display: grid; place-items: center; font-size: 15px; padding: 0;
}
.bildwerkzeuge button:hover { background: rgba(255,255,255,.22); }
.bildwerkzeuge .stand { color: #fff; font-size: 12.5px; display: grid; place-items: center; padding: 0 4px; }
.bildhelligkeit-werkzeug { position: relative; display: flex; }
.bildhelligkeit-popover {
  position: absolute; left: 0; bottom: 31px; width: 224px; z-index: 30;
  padding: 11px; border: 1px solid var(--rand); border-radius: 9px;
  color: var(--text); background: var(--weiss); box-shadow: var(--schatten-tief);
  cursor: default;
}
.bildhelligkeit-popover[hidden] { display: none; }
.bildhelligkeit-popover label { display: grid; gap: 7px; font-size: 14px; font-weight: 600; }
.bildhelligkeit-popover input[type="range"] { width: 100%; accent-color: var(--blau); }
.bildhelligkeit-popover strong {
  display: block; margin: 7px 0; color: var(--text-leise); font-size: 13px;
}
.bildhelligkeit-popover .bildhelligkeit-reset {
  width: 100%; height: auto; min-height: 30px; padding: 5px 8px;
  color: var(--text); background: var(--flaeche); border: 1px solid var(--rand);
  font-size: 13px;
}
.bildhelligkeit-popover .bildhelligkeit-reset:hover {
  color: var(--blau); background: var(--blau-flaeche);
}

.coverbildauswahl { display: grid; gap: 22px; }
.coverbildauswahl > .leiseinfo { margin: 0; }
.coverbildauswahl section { display: grid; gap: 10px; }
.coverbildauswahl h3 { margin: 0; font-size: 17px; }
.coverbildauswahl .coverbilddarstellung {
  margin: -4px 0 0; padding: 13px 14px; border: 1px solid var(--rand);
  border-radius: var(--radius-eingabe); background: var(--flaeche);
}
.coverbilddarstellung .leiseinfo { margin: -3px 0 1px; }
.coverbilddarstellung label {
  display: grid; grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center; gap: 11px; color: var(--text); font-weight: 600;
}
.coverbilddarstellung input[type="range"] { width: 100%; accent-color: var(--blau); }
.coverbilddarstellung strong { min-width: 48px; text-align: right; color: var(--text-leise); }
.coverbildgitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
}
.coverbildkarte {
  min-width: 0; padding: 0; overflow: hidden; text-align: left;
  color: var(--text); background: var(--weiss); border: 1px solid var(--rand);
  border-radius: 9px;
}
.coverbildkarte:hover, .coverbildkarte:focus-visible {
  border-color: var(--blau); box-shadow: 0 0 0 2px var(--blau-flaeche); outline: none;
}
.coverbildkarte img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--flaeche);
}
.coverbildkarte span {
  display: block; padding: 7px 8px; overflow: hidden; color: var(--text-leise);
  font-size: 13px; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------------ Textfelder */

.paneltext:empty::before { content: attr(data-platzhalter); color: #9ca3af; }
.paneltext:focus { background: #fbfcff; box-shadow: inset 0 0 0 2px var(--blau-flaeche); }

.textblock:empty::before { content: attr(data-platzhalter); color: #9ca3af; }
.textblock:focus { box-shadow: inset 0 0 0 2px var(--blau-flaeche); border-radius: 3px; }

.bildunterschrift:empty::before { content: attr(data-platzhalter); color: #9ca3af; }

.hinweisblock:empty::before { content: attr(data-platzhalter); opacity: .55; }

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

/* Die Tabelle auf dem Blatt gehoert dem Satz. Hier steht nur noch, was
   ausschliesslich der Bearbeitung dient: Platzhalter und Fokus. Alles
   Masshaltige - Schriftgrad, Zeilenhoehe, Polster, Rahmen, Ueberlauf -
   steht in satz.css. Frueher setzte studio.css hier line-height: 1.4 und
   ueberschrieb damit --durchschuss-eng; die Zeilen wanderten kumulativ und
   der Editor zeigte Tabellen anders als Vorschau und Ausgabe. */
.tabellenblock th, .tabellenblock td { outline: none; }
.tabellenblock td:empty::before, .tabellenblock th:empty::before {
  content: attr(data-platzhalter); color: #b6bcc6;
}
/* Die Werkzeugleisten sind Bedienelemente, keine Satzelemente: absolut
   positioniert zehren sie keine Hoehe im Block. Im Fluss verkleinerten sie
   den Textbereich um Platz, den es in Vorschau und Ausgabe nicht gibt. */
.tabellenwerkzeuge, .listenwerkzeuge {
  position: absolute; right: 4px; bottom: 4px; z-index: 8;
  display: none; gap: 5px;
}
.block:hover > .tabellenwerkzeuge, .block.markiert > .tabellenwerkzeuge,
.block:hover > .listenwerkzeuge, .block.markiert > .listenwerkzeuge,
.block:focus-within > .tabellenwerkzeuge, .block:focus-within > .listenwerkzeuge {
  display: flex;
}
.tabellenwerkzeuge button {
  font-size: 12.5px; padding: 3px 7px; border: 1px solid var(--rand);
  border-radius: 5px; background: var(--weiss); color: var(--text-leise);
}
.tabellenwerkzeuge button:hover { border-color: var(--blau-rand); color: var(--blau); }

/* ---------------------------------------------------------------- Sprechblasen */

.blase {
  position: absolute; z-index: 5; max-width: 68%; min-width: 60px;
  background: #fff; border: 1.5px solid #111827; border-radius: 14px;
  padding: 5px 9px; font-size: 12.5px; line-height: 1.3; font-weight: 600;
  cursor: move; box-shadow: 0 2px 5px rgba(17,24,39,.15);
}
.blase[data-art="denken"] { border-radius: 20px; border-style: dashed; }
.blase[data-art="ruf"] { border-radius: 3px; transform: rotate(-1.5deg); }
.blase[data-art="kasten"] { border-radius: 2px; background: var(--gelb); font-weight: 500; }
.blase .zipfel {
  position: absolute; left: 16px; bottom: -10px; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 10px solid #111827;
}
.blase .zipfel::after {
  content: ""; position: absolute; left: -4px; top: -12px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 8px solid #fff;
}
.blase[data-art="kasten"] .zipfel, .blase[data-art="denken"] .zipfel { display: none; }
.blase .inhalt { outline: none; min-width: 32px; }
.blase .inhalt:empty::before { content: attr(data-platzhalter); color: #9ca3af; font-weight: 400; }
.blase .loeschen {
  position: absolute; top: -9px; right: -9px; width: 18px; height: 18px;
  border-radius: 50%; border: none; background: var(--rot); color: #fff;
  font-size: 13px; line-height: 1; display: none; place-items: center; padding: 0;
}
.blase:hover .loeschen { display: grid; }

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

.dialoghuelle {
  position: fixed; inset: 0; background: rgba(17,24,39,.5);
  display: grid; place-items: center; padding: 24px; z-index: 60;
}
.dialoghuelle[hidden] { display: none; }
.dialog {
  background: var(--weiss); border-radius: 14px; width: min(620px, 100%);
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(17,24,39,.28);
}
.dialog header {
  padding: 18px 22px 12px; border-bottom: 1px solid var(--rand);
  display: flex; align-items: center; gap: 10px;
}
.dialog header h2 { margin: 0; font-size: 20px; }
.dialog header .schliessen {
  margin-left: auto; border: none; background: none; color: var(--text-leise);
  font-size: 22px; line-height: 1; padding: 4px 8px; border-radius: 6px;
}
.dialog header .schliessen:hover { background: var(--flaeche); }
.dialog .inhalt { padding: 18px 22px; overflow-y: auto; }
.dialog footer {
  padding: 14px 22px; border-top: 1px solid var(--rand);
  display: flex; gap: 8px; justify-content: flex-end;
}

.bundledialog { display: grid; gap: 14px; }
.bundleerklaerung { margin: 0; line-height: 1.55; color: var(--text); }
.bundlehinweis { font-size: 14px; line-height: 1.5; }
.bundlesteuerung { display: flex; flex-wrap: wrap; gap: 7px; }
.bundlesteuerung .knopf.klein { padding: 6px 10px; font-size: 13.5px; }
.bundleauswahl {
  display: grid; border: 1px solid var(--rand); border-radius: 10px;
  overflow: hidden; background: var(--weiss);
}
.bundlezeile {
  display: grid; grid-template-columns: 20px 26px minmax(0, 1fr);
  gap: 10px; align-items: start; padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid var(--rand);
}
.bundlezeile:last-child { border-bottom: none; }
.bundlezeile:hover { background: var(--flaeche); }
.bundlezeile:has(input:focus-visible) {
  outline: 2px solid var(--blau); outline-offset: -2px;
}
.bundlezeile input { margin: 3px 0 0; }
.bundlezeile input:disabled { opacity: .72; }
.bundlenummer {
  width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; color: #8b7757; background: #f2ece0;
}
.bundlebeschreibung { min-width: 0; display: grid; gap: 3px; }
.bundlezeilenkopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bundlezeilenkopf strong { font-size: 14.5px; }
.bundlezeilenkopf em {
  border-radius: 999px; padding: 2px 7px; background: var(--flaeche);
  color: var(--text-leise); font-size: 11.5px; font-style: normal;
  letter-spacing: .03em; text-transform: uppercase;
}
.bundlebeschreibung small { color: var(--text-leise); font-size: 13.5px; line-height: 1.35; }
.bundlestatus { margin: 0; text-align: right; font-size: 14px; font-weight: 600; color: #8b7757; }

.feldgruppe { margin-bottom: 18px; }
.feldgruppe > label {
  display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 7px;
}
.feldgruppe .beisatz { font-size: 14px; color: var(--text-leise); margin: -3px 0 8px; line-height: 1.5; }
.feldgruppe input[type=text] {
  width: 100%; border: 1px solid var(--rand-stark); border-radius: var(--radius);
  padding: 9px 11px; font-size: 16px;
}
.feldgruppe input[type=text]:focus {
  outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Ein Massfeld im Dialog: Zahl und Einheit nebeneinander, schmal genug,
   dass vier davon untereinander nicht wie ein Formular wirken. */
/* Die Schriftwahl bringt eine Erklaerung mit - sie steht unter der Auswahl
   und aendert sich mit ihr. */
.schriftwahl { display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
.schriftwahl .einstellungsinformation { margin: 0; }

.masszeile { display: flex; align-items: center; gap: 6px; }
.masszeile .eingabe.schmal {
  width: 82px; border: 1px solid var(--rand-stark); border-radius: var(--radius);
  padding: 7px 9px; font-size: 15px; text-align: right;
}
.masszeile .eingabe.schmal:focus {
  outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.masseinheit { font-size: 14px; color: var(--text-leise); }

.wahlreihe { display: flex; gap: 8px; flex-wrap: wrap; }
.wahlmarke {
  border: 1.5px solid var(--rand); border-radius: 999px; background: var(--weiss);
  padding: 7px 15px; font-size: 15px;
}
.wahlmarke[aria-pressed="true"] {
  border-color: var(--blau); background: var(--blau-flaeche); color: var(--blau); font-weight: 600;
}

.formatgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 10px; }
.formatkarte {
  border: 1.5px solid var(--rand); border-radius: 10px; background: var(--weiss);
  padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.formatkarte:hover { border-color: var(--blau-rand); }
.formatkarte[aria-pressed="true"] { border-color: var(--blau); background: var(--blau-flaeche); }
.formatkarte .blattbild {
  background: var(--weiss); border: 1.5px solid var(--rand-stark); border-radius: 2px;
  box-shadow: 0 1px 3px rgba(17,24,39,.1);
}
.formatkarte .name { font-size: 14px; font-weight: 600; text-align: center; line-height: 1.3; }
.formatkarte .mass { font-size: 12.5px; color: var(--text-leise); }

.warnkasten {
  background: #fef2f2; border: 1px solid #f3c4c4; border-radius: var(--radius);
  padding: 12px 14px; font-size: 15px; line-height: 1.55; color: #7f1d1d;
}

.warnkasten, .hinweiskasten-dialog { white-space: pre-line; }
.pruefliste { margin: 8px 0 18px; padding-left: 22px; line-height: 1.55; }
.pruefliste.fehler { color: var(--rot); }
.projektfilter { margin: -2px 0 18px; }
.medienkarte[role="checkbox"]:focus-visible {
  outline: 3px solid var(--blau-rand); outline-offset: 3px;
}

/* ---------------------------------------------------------------------- Rest */

.meldung {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #111827; color: #fff; padding: 11px 18px; border-radius: 10px;
  font-size: 15px; z-index: 80; box-shadow: 0 10px 30px rgba(17,24,39,.24);
  max-width: min(620px, 90vw);
}
.meldung.fehler { background: var(--rot); }

/* ----------------------------------------------------------------- Responsiv */

@media (max-width: 1240px) {
  .app { grid-template-columns: 64px 264px minmax(0, 1fr); }
  .arbeitsflaeche { padding: 0 16px 80px; }
}
@media (max-width: 980px) {
  .app { grid-template-columns: 60px 232px minmax(0, 1fr); }
  .kennmarke { display: none; }
  .knopf .beschriftung { display: none; }
  .knopf { padding: 8px 10px; }
}
@media (max-width: 760px) {
  .app, .app[data-ansicht="start"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px auto minmax(0, 1fr);
    grid-template-areas: "kopfzeile" "seitenleiste" "arbeitsflaeche";
  }
  .leiste {
    grid-area: kopfzeile; flex-direction: row; align-items: center;
    border-right: none; border-bottom: 1px solid var(--rand);
    padding: 0 10px; gap: 4px; position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 40; background: var(--weiss); height: 58px;
  }
  .leiste .marke { display: none; }
  .leiste .unten { margin-top: 0; flex-direction: row; }
  .seitenkopf { display: none; }
  .seitenleiste {
    max-height: 34vh; border-right: none; border-bottom: 1px solid var(--rand);
  }
  .vorlagengitter, .mediathek { grid-template-columns: repeat(3, 1fr); }
  .app[data-ansicht="start"] .seitenleiste { display: none; }
  .arbeitsflaeche { padding: 0 12px 130px; }
  .kopfzeile { padding: 0 12px; }
  .sicherungsstand { display: none; }
  .startkopf { flex-direction: column; align-items: stretch; gap: 12px; }
  .startkopf .rechts { margin-left: 0; }
  .projektgitter { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.seitenleiste::-webkit-scrollbar, .arbeitsflaeche::-webkit-scrollbar { width: 10px; }
.seitenleiste::-webkit-scrollbar-thumb, .arbeitsflaeche::-webkit-scrollbar-thumb {
  background: var(--rand-stark); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}

/* =====================================================================
   Ausbaustufe 2 — Themen, Anmeldung, Texteditor, Einstellungen, Medien
   ===================================================================== */

/* --------------------------------------------------------------- Dunkles Thema */

html[data-thema="dunkel"] {
  --weiss: #24211c;
  --flaeche: #1a1815;
  --text: #fff9ef;
  --text-leise: #d1c5b4;
  --rand: #38332b;
  --rand-stark: #4c4539;
  --blau: #c9b391;
  --blau-tief: #dcc9ab;
  --blau-flaeche: #2e2920;
  --blau-rand: #554c3c;
  --rot: #d98b7c;
  --gruen: #94ab88;
  --gelb: #35301f;
  --schatten: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 18px rgba(0, 0, 0, .28);
  --schatten-tief: 0 2px 6px rgba(0, 0, 0, .38), 0 16px 40px rgba(0, 0, 0, .42);
}
@media (prefers-color-scheme: dark) {
  html[data-thema="system"] {
    --weiss: #24211c;
    --flaeche: #1a1815;
    --text: #fff9ef;
    --text-leise: #d1c5b4;
    --rand: #38332b;
    --rand-stark: #4c4539;
    --blau: #c9b391;
    --blau-tief: #dcc9ab;
    --blau-flaeche: #2e2920;
    --blau-rand: #554c3c;
    --rot: #d98b7c;
    --gruen: #94ab88;
    --gelb: #35301f;
    --schatten: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 18px rgba(0, 0, 0, .28);
    --schatten-tief: 0 2px 6px rgba(0, 0, 0, .38), 0 16px 40px rgba(0, 0, 0, .42);
  }
}

/* Das Blatt bleibt Papier — unabhaengig vom Thema der Oberflaeche. */
.blatt, .formatkarte .blattbild, .projektkarte .blattbild {
  --weiss: #fdfcfa;
  --flaeche: #f2efe9;
  --text: #241f1a;
  --text-leise: #7c7268;
  --rand: #e5ded1;
  --rand-stark: #d4c9b6;
  --blau-flaeche: #efe9de;
  --blau-rand: #cdbfa6;
  --blau: #8b7757;
  background: #fdfcfa;
  color: #241f1a;
}

/* ------------------------------------------------------------------ Anmeldung */

body.anmeldeseite {
  display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1100px 460px at 50% -10%, rgba(37,99,235,.12), transparent 70%),
    var(--flaeche);
}
.anmeldekarte {
  width: min(420px, 100%); background: var(--weiss);
  border: 1px solid var(--rand); border-radius: 16px; padding: 30px 28px 24px;
  box-shadow: 0 18px 50px rgba(17,24,39,.12);
}
.anmeldemarke {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 600; margin-bottom: 22px;
}
/* Die Marke besteht jetzt aus Symbol und Schriftzug - keine Kachel mehr. */
.anmeldekarte h1 { font-size: 24px; margin: 0 0 6px; }
.anmeldekarte .beisatz {
  font-size: 15px; color: var(--text-leise); line-height: 1.55; margin: 0 0 20px;
}
.anmeldekarte .feldgruppe .beisatz { margin: 7px 0 0; font-size: 14px; }
.anmeldekarte input[type=text], .anmeldekarte input[type=password] {
  width: 100%; border: 1px solid var(--rand-stark); border-radius: var(--radius);
  padding: 10px 12px; font-size: 16px; background: var(--weiss); color: var(--text);
}
.anmeldekarte input:focus {
  outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.anmeldefehler {
  background: #fef2f2; border: 1px solid #f3c4c4; color: #7f1d1d;
  border-radius: var(--radius); padding: 10px 12px; font-size: 15px;
  line-height: 1.5; margin: 0 0 14px;
}
html[data-thema="dunkel"] .anmeldefehler { background: #3a1f21; border-color: #6b2f31; color: #ffb4ae; }
.anmeldefuss {
  margin: 18px 0 0; font-size: 13.5px; color: var(--text-leise);
  text-align: center; line-height: 1.5;
}

/* ------------------------------------------------------------------ Texteditor */

.textwerkzeuge {
  position: fixed; z-index: 55;
  background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(17,24,39,.18);
  padding: 5px; display: flex; flex-direction: column; gap: 3px;
}
.textwerkzeuge[hidden] { display: none; }
.textwerkzeuge .reihe { display: flex; gap: 3px; }
.textwerkzeuge button {
  width: 30px; height: 30px; border: none; background: none; border-radius: 6px;
  color: var(--text-leise); display: grid; place-items: center;
  font-size: 15px; padding: 0; line-height: 1;
}
.textwerkzeuge button:hover { background: var(--flaeche); color: var(--text); }
.textwerkzeuge button.aktiv { background: var(--blau-flaeche); color: var(--blau); }
.textwerkzeuge button svg { width: 15px; height: 15px; }
.textwerkzeuge .trenner { height: 1px; background: var(--rand); margin: 2px 0; }
.textwerkzeuge select {
  border: 1px solid var(--rand); border-radius: 6px; background: var(--weiss);
  color: var(--text); font-size: 13.5px; padding: 4px 5px; width: 100%;
}

.schrift-arial { font-family: Arial, Helvetica, sans-serif; }
.schrift-opensans { font-family: "Open Sans", "Segoe UI", system-ui, sans-serif; }
.schrift-mono {
  font-family: "Consolas", "SF Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  font-size: .94em;
}

/* Absätze, Listen und Zitate stehen in satz.css */

/* --------------------------------------------------------------- Einstellungen */

.einstellungsbereich { max-width: 760px; margin: 0 auto; padding: 26px 0 60px; }
.einstellungsbereich > h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: -.01em; }
.einstellungsbereich > p.beisatz { color: var(--text-leise); margin: 0 0 24px; font-size: 15.5px; }

.einstellungsgruppe {
  background: var(--weiss); border: 1px solid var(--rand); border-radius: 12px;
  padding: 20px 22px; margin-bottom: 16px;
}
.einstellungsgruppe h2 { font-size: 18px; margin: 0 0 4px; }
.einstellungsgruppe > .beisatz {
  font-size: 14.5px; color: var(--text-leise); margin: 0 0 16px; line-height: 1.55;
}
.einstellungszeile {
  display: flex; align-items: center; gap: 16px; padding: 12px 0;
  border-top: 1px solid var(--rand);
}
.einstellungszeile:first-of-type { border-top: none; }
.einstellungszeile .beschreibung { flex: 1; min-width: 0; }
.einstellungszeile .beschreibung b { display: block; font-size: 15.5px; font-weight: 600; }
.einstellungszeile .beschreibung > span {
  font-size: 14.5px; color: var(--text-leise); line-height: 1.5;
}
.einstellungszeile .steuerung { flex: none; }
.einstellungszeile select {
  border: 1px solid var(--rand-stark); border-radius: var(--radius);
  padding: 8px 10px; background: var(--weiss); color: var(--text); font-size: 15.5px;
}

.schalter {
  position: relative; width: 44px; height: 25px; border-radius: 999px;
  border: none; background: var(--rand-stark); padding: 0; transition: background .15s;
}
.schalter::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  background: #fff; border-radius: 50%; transition: transform .15s;
  box-shadow: 0 1px 3px rgba(17,24,39,.3);
}
.schalter[aria-pressed="true"] { background: var(--blau); }
.schalter[aria-pressed="true"]::after { transform: translateX(19px); }

.einstellungstitel { display: flex; align-items: center; gap: 7px; margin-bottom: 1px; }
.warnhilfe { position: relative; display: inline-flex; flex: none; }
.warnhilfe-knopf {
  width: 22px; height: 22px; padding: 3px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: #b45309;
}
.warnhilfe-knopf:hover, .warnhilfe-knopf:focus-visible {
  background: rgba(180,83,9,.12); outline: none;
}
.warnhilfe-knopf svg { width: 16px; height: 16px; }
.warnhilfe-fenster {
  position: absolute; z-index: 55; left: -8px; top: calc(100% + 7px);
  width: min(310px, 76vw); padding: 11px 13px; border-radius: 9px;
  border: 1px solid rgba(180,83,9,.38); background: var(--weiss); color: var(--text);
  box-shadow: var(--schatten-tief); font-size: 14px; font-weight: 400; line-height: 1.5;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s, transform .12s, visibility .12s; pointer-events: none;
}
.warnhilfe-fenster::before {
  content: ""; position: absolute; left: 14px; top: -5px; width: 8px; height: 8px;
  transform: rotate(45deg); background: var(--weiss);
  border-left: 1px solid rgba(180,83,9,.38); border-top: 1px solid rgba(180,83,9,.38);
}
.warnhilfe:hover .warnhilfe-fenster,
.warnhilfe:focus-within .warnhilfe-fenster,
.warnhilfe.offen .warnhilfe-fenster {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.adminhaken {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px;
  padding: 5px 9px; border: 1px solid var(--rand); border-radius: 8px;
  color: var(--text); background: var(--flaeche); font-size: 14.5px; cursor: pointer;
}
.adminhaken:has(input:checked) { border-color: var(--blau-rand); color: var(--blau); }
.adminhaken input { width: 17px; height: 17px; accent-color: var(--blau); }
.adminhaken:has(input:disabled) { opacity: .55; cursor: wait; }

.themawahl { display: flex; gap: 8px; }
.themakarte {
  border: 1.5px solid var(--rand); border-radius: 10px; background: var(--weiss);
  padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 14px; color: var(--text-leise); min-width: 74px;
}
.themakarte[aria-pressed="true"] { border-color: var(--blau); color: var(--blau); font-weight: 600; }
.themakarte .probe {
  width: 46px; height: 30px; border-radius: 5px; border: 1px solid var(--rand-stark);
  overflow: hidden; display: flex;
}
.themakarte .probe i { flex: 1; }
.themakarte .probe .hell { background: #fff; }
.themakarte .probe .dunkel { background: #1b1e24; }

/* ------------------------------------------------------------ Medienverwaltung */

.medienkopf { display: flex; gap: 8px; margin-bottom: 12px; }
.medienkopf input[type=search] {
  flex: 1; min-width: 0; border: 1px solid var(--rand-stark); border-radius: var(--radius);
  padding: 7px 10px; font-size: 15px; background: var(--weiss); color: var(--text);
}
.medienkopf input:focus { outline: none; border-color: var(--blau); }

.medienverwaltung { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.medienkarte {
  border: 1px solid var(--rand); border-radius: 10px; overflow: hidden;
  background: var(--weiss); display: flex; flex-direction: column;
}
.medienkarte .bild {
  aspect-ratio: 4 / 3; background: var(--flaeche);
  display: grid; place-items: center; overflow: hidden;
}
.medienkarte .bild img { width: 100%; height: 100%; object-fit: cover; }
.medienkarte .angaben { padding: 9px 10px; font-size: 13.5px; color: var(--text-leise); }
.medienkarte .angaben b {
  display: block; color: var(--text); font-size: 14.5px; font-weight: 600;
  overflow-wrap: anywhere; margin-bottom: 3px;
}
.medienkarte .fuss { display: flex; gap: 6px; padding: 0 10px 10px; }
.medienkarte .fuss .knopf { flex: 1; justify-content: center; }
.medienmarke {
  display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 999px;
  background: var(--blau-flaeche); color: var(--blau); font-size: 12.5px; font-weight: 600;
}
.medienmarke.ungenutzt { background: var(--flaeche); color: var(--text-leise); }

/* ------------------------------------------------------------------- Kleinkram */

.werkzeug.abmelden:hover { background: #fef2f2; color: var(--rot); }
html[data-thema="dunkel"] .werkzeug.abmelden:hover { background: #3a1f21; }
.benutzermarke {
  font-size: 14px; color: var(--text-leise); display: flex; align-items: center; gap: 7px;
}
.benutzermarke b { color: var(--text); font-weight: 600; }

.hilfslinien .satzspiegel { outline: 1px dashed rgba(37,99,235,.28); outline-offset: 0; }

/* =====================================================================
   Ausbaustufe 3 — Konten, Mediathek, Favoriten, dunkle Eingabefelder
   ===================================================================== */

/* Eigene Flaeche fuer Eingabefelder: im dunklen Thema dunkler als die Karte,
   damit nichts blendet und der Text lesbar bleibt. */
:root {
  --eingabe: #fdfcfa;
  --eingabe-rand: #d4c9b6;
  --eingabe-text: #2a2622;
}
html[data-thema="dunkel"] {
  --eingabe: #1c1a16;
  --eingabe-rand: #4c4539;
  --eingabe-text: #fff9ef;
}
@media (prefers-color-scheme: dark) {
  html[data-thema="system"] {
    --eingabe: #1c1a16;
    --eingabe-rand: #4c4539;
    --eingabe-text: #fff9ef;
  }
}

.feldgruppe input[type=text],
.feldgruppe input[type=password],
.feldgruppe input[type=number],
.feldgruppe textarea,
.feldgruppe select,
.anmeldekarte input[type=text],
.anmeldekarte input[type=password],
.medienkopf input[type=search],
.einstellungszeile select,
.einstellungszeile input[type=text],
.zoomgruppe input {
  background: var(--eingabe);
  border-color: var(--eingabe-rand);
  color: var(--eingabe-text);
}
.feldgruppe input::placeholder,
.anmeldekarte input::placeholder,
.medienkopf input::placeholder { color: #8b929c; }
html[data-thema="dunkel"] .feldgruppe input::placeholder,
html[data-thema="dunkel"] .medienkopf input::placeholder { color: #aaa08f; }
@media (prefers-color-scheme: dark) {
  html[data-thema="system"] .feldgruppe input::placeholder,
  html[data-thema="system"] .medienkopf input::placeholder { color: #aaa08f; }
}

/* Die Blattflaeche bleibt Papier — dort gelten die hellen Werte weiter. */
.blatt { --eingabe: #fff; --eingabe-rand: #d5d8de; --eingabe-text: #1f2937; }

/* ------------------------------------------------------------ Anmeldereiter */

.anmeldereiter {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 20px;
  background: var(--flaeche); border-radius: 10px;
}
.anmeldereiter button {
  flex: 1; border: none; background: none; border-radius: 7px;
  padding: 8px 10px; font-size: 15.5px; color: var(--text-leise);
}
.anmeldereiter button.aktiv {
  background: var(--weiss); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 3px rgba(17,24,39,.12);
}

.ankreuzzeile {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 0 18px; font-size: 15px; cursor: pointer;
}
.ankreuzzeile input { margin-top: 2px; accent-color: var(--blau); }
.ankreuzzeile small {
  display: block; color: var(--text-leise); font-size: 13.5px;
  margin-top: 2px; line-height: 1.45;
}

/* --------------------------------------------------------------- Cookiebanner */

.cookiebanner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  background: var(--weiss); border: 1px solid var(--rand); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(17,24,39,.22);
  padding: 16px 18px; display: flex; gap: 18px; align-items: center;
  max-width: 880px; margin: 0 auto;
}
.cookiebanner[hidden] { display: none; }
.cookiebanner .text { font-size: 14.5px; line-height: 1.55; color: var(--text-leise); }
.cookiebanner .text b { display: block; color: var(--text); font-size: 15.5px; margin-bottom: 3px; }
.cookiebanner .knopf { flex: none; }
body.anmeldeseite:has(.cookiebanner:not([hidden])) {
  /* Der rein informative Hinweis darf das Anmeldeformular nicht verdecken. */
  padding-bottom: 136px;
}
@media (max-width: 700px) {
  .cookiebanner { flex-direction: column; align-items: stretch; }
  body.anmeldeseite:has(.cookiebanner:not([hidden])) {
    place-items: start center;
    overflow-y: auto;
    padding-bottom: 220px;
  }
}

/* ------------------------------------------------------------------ Favoriten */

.vorlagenhuelle { position: relative; }
.vorlagenhuelle .vorlagenkarte { height: 100%; }
.sternknopf {
  position: absolute; top: 4px; right: 4px; z-index: 3;
  width: 24px; height: 24px; border-radius: 6px; border: none;
  background: rgba(255,255,255,.9); color: #9aa1ab;
  display: none; place-items: center; padding: 0;
}
html[data-thema="dunkel"] .sternknopf { background: rgba(27,30,36,.9); }
.vorlagenhuelle:hover .sternknopf,
.vorlagenhuelle:focus-within .sternknopf,
.sternknopf:focus,
.sternknopf.gesetzt { display: grid; }
.sternknopf.gesetzt { color: #e8a33d; }
.sternknopf svg { width: 15px; height: 15px; }

.gruppentitel.favoriten { color: #c2841f; display: flex; align-items: center; gap: 6px; }
.gruppentitel.favoriten svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ Mediathek */

.mediathekseite { max-width: 1100px; margin: 0 auto; padding: 26px 0 60px; }
.mediathekseite .startkopf { margin-bottom: 18px; }
.medienleiste {
  display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap;
}
.medienleiste input[type=search] {
  flex: 1; min-width: 190px; border: 1px solid var(--eingabe-rand);
  border-radius: var(--radius); padding: 9px 12px; font-size: 15.5px;
  background: var(--eingabe); color: var(--eingabe-text);
}
.medienleiste input:focus { outline: none; border-color: var(--blau); }
.medienzahl { font-size: 14.5px; color: var(--text-leise); }

.medienkarte.gewaehlt { border-color: var(--blau); box-shadow: 0 0 0 2px rgba(37,99,235,.18); }
.medienkarte .bild { position: relative; }
.medienkarte .haken {
  position: absolute; top: 6px; left: 6px; width: 22px; height: 22px;
  border-radius: 6px; background: var(--blau); color: #fff;
  display: none; place-items: center; font-size: 15px;
}
.medienkarte.gewaehlt .haken { display: grid; }
.medienkarte .verwendung { display: block; margin-top: 3px; }

/* ------------------------------------------------------------ Kontenverwaltung */

.kontenliste { display: grid; gap: 10px; }
.kontenzeile {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px;
  background: var(--weiss);
}
.kontenzeile .wer { flex: 1; min-width: 160px; }
.kontenzeile .wer b { display: block; font-size: 15.5px; }
.kontenzeile .wer span { font-size: 14px; color: var(--text-leise); }
.rollenmarke {
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--flaeche); color: var(--text-leise);
}
.rollenmarke.admin { background: var(--blau-flaeche); color: var(--blau); }
.rollenmarke.gesperrt { background: #fef2f2; color: var(--rot); }
html[data-thema="dunkel"] .rollenmarke.gesperrt { background: #3a1f21; }

/* ------------------------------------------------------------------- Rechtstexte */

.rechtstext { max-width: 760px; margin: 0 auto; padding: 26px 0 70px; line-height: 1.65; }
.rechtstext h1 { font-size: 27px; margin: 0 0 6px; }
.rechtstext .stand { font-size: 14.5px; color: var(--text-leise); margin: 0 0 24px; }
.rechtstext section {
  background: var(--weiss); border: 1px solid var(--rand); border-radius: 12px;
  padding: 20px 24px; margin-bottom: 14px;
}
.rechtstext h2 { font-size: 18px; margin: 0 0 10px; }
.rechtstext p { margin: 0 0 12px; font-size: 15.5px; }
.rechtstext p:last-child { margin-bottom: 0; }
.rechtstext ul { margin: 0 0 12px; padding-left: 20px; font-size: 15.5px; }
.rechtstext li { margin-bottom: 5px; }
.rechtstext code {
  font-family: var(--schrift-mono); font-size: 14.5px;
  background: var(--flaeche); padding: 1px 5px; border-radius: 4px;
}

/* ------------------------------------------------------- Panel: Text und Bild */

/* Wichtig fuer das strenge Layout: Der Text darf hoechstens zwei Drittel des
   Panels einnehmen, das Bildfeld gibt den Rest her - die Seite waechst nie. */
.panel { overflow: hidden; }
.panel > .bildfeld { flex: 1 1 auto; min-height: 22%; }
.paneltext { flex: 0 0 auto; max-height: 66%; overflow: auto; }

.blattleer { pointer-events: none; }

/* ------------------------------------------------------------ Hinweis-Systematik */

.hinweismarke {
  position: absolute; left: 5px; top: 5px; z-index: 9;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--rot);
  box-shadow: 0 1px 4px rgba(17,24,39,.35); cursor: help;
}
.hinweismarke.hinweis { background: #b0771c; }

.hinweisleiste {
  max-width: min(100%, 1020px); margin: 16px auto 0;
  background: var(--weiss); border: 1px solid var(--rand);
  border-left: 4px solid var(--rot); border-radius: 10px;
  padding: 12px 16px;
}
.hinweisleiste[hidden] { display: none; }
.hinweiskopf { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.hinweiskopf .zeichen {
  width: 19px; height: 19px; border-radius: 50%; background: var(--rot); color: #fff;
  display: grid; place-items: center; font-size: 14.5px; font-weight: 700; flex: none;
}
.hinweiskopf b { font-size: 15.5px; }
.hinweiszeile {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 6px 0 6px 28px; font-size: 14.5px; color: var(--text-leise);
  border-top: 1px solid var(--rand);
}
.hinweiszeile .ort {
  font-weight: 600; color: var(--text); min-width: 62px; font-size: 14px;
}
.hinweiszeile .rat { color: var(--blau); }

/* App-weit: alle Eingabeelemente folgen der Eingabeflaeche des Themas. */
select,
textarea,
input[type=text]:not(.dokumenttitel),
input[type=password],
input[type=search],
input[type=number],
input[type=email] {
  background: var(--eingabe);
  border: 1px solid var(--eingabe-rand);
  color: var(--eingabe-text);
  border-radius: 6px;
}
select:focus, textarea:focus,
input[type=text]:focus, input[type=password]:focus,
input[type=search]:focus, input[type=number]:focus {
  outline: none; border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
input[type=checkbox] { accent-color: var(--blau); }
option { background: var(--eingabe); color: var(--eingabe-text); }

.kontenzeile select { padding: 6px 9px; font-size: 14.5px; }
.panelkopf select, .promptzeile select, .dialogzeile select { border-radius: 6px; }

/* =====================================================================
   Ausbaustufe 4 — klappbare Bereichsleiste, Kopfzeile, Symbol
   ===================================================================== */

:root { --leiste-breite: 72px; }
html[data-leiste="offen"] { --leiste-breite: 236px; }

.app { grid-template-columns: var(--leiste-breite) 296px minmax(0, 1fr) 320px; }
.app[data-ansicht="start"] { grid-template-columns: var(--leiste-breite) minmax(0, 1fr); }

.leiste { padding: 12px 10px; gap: 4px; align-items: stretch; }

.leistenkopf {
  display: flex; align-items: center; gap: 10px;
  padding: 0 2px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--rand);
  flex-direction: column;
}
html[data-leiste="offen"] .leistenkopf { flex-direction: row; }

.leiste .marke {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center; background: none; margin: 0; overflow: hidden;
}
.leiste .marke img { width: 40px; height: 40px; display: block; }

.markentext {
  display: none; font-size: 17.5px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; flex: 1; min-width: 0;
}
.markentext b { color: var(--blau); font-weight: 700; }
html[data-leiste="offen"] .markentext { display: block; }

.leistenschalter {
  width: 34px; height: 34px; flex: none; border-radius: 9px; border: none;
  background: transparent; color: var(--text-leise);
  display: grid; place-items: center;
}
.leistenschalter:hover { background: var(--flaeche); color: var(--text); }
.leistenschalter svg { width: 17px; height: 17px; transition: transform .15s; }
html[data-leiste="offen"] .leistenschalter svg { transform: rotate(180deg); }

/* Eintraege: eingeklappt nur Symbol, ausgeklappt Symbol und Name */
.werkzeug {
  width: 100%; height: 42px; justify-content: center;
  display: flex; align-items: center; gap: 11px; padding: 0;
}
html[data-leiste="offen"] .werkzeug { justify-content: flex-start; padding: 0 12px; }
.werkzeug svg { flex: none; }
.werkzeugname {
  display: none; font-size: 15.5px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
html[data-leiste="offen"] .werkzeugname { display: block; }

.projektwerkzeuge { display: flex; flex-direction: column; gap: 4px; }
.projektwerkzeuge[hidden] { display: none; }
.leiste .unten { margin-top: auto; gap: 4px; padding-top: 10px; border-top: 1px solid var(--rand); }

/* ------------------------------------------------------------ Kopfzeile exakt */

/* Kein overflow:hidden - sonst schneidet die Kopfzeile das Aufklappmenue des
   Exports ab. Den Platz regeln die Container-Abfragen weiter unten. */
.kopfzeile { align-items: center; overflow: visible; }
.wortmarke {
  display: inline-flex; align-items: center; line-height: 1; font-size: 19px;
  flex: none;
}
.kennmarke {
  display: inline-flex; align-items: center; line-height: 1;
  height: 26px; padding: 0 11px; font-size: 14px;
}
.dokumenttitel { line-height: 1.25; }
.zurueckknopf, .knopf { line-height: 1.15; }

@media (max-width: 760px) {
  .app, .app[data-ansicht="start"] { grid-template-columns: minmax(0, 1fr); }
  .leiste { flex-direction: row; padding: 0 8px; gap: 2px; align-items: center; }
  .leistenkopf, .markentext { display: none !important; }
  .leiste .unten { border-top: none; padding-top: 0; }
  .werkzeug { width: 46px; height: 46px; justify-content: center; padding: 0; }
  .werkzeugname { display: none !important; }
}

/* Die Kopfzeile misst sich selbst: Wird der Platz knapp - etwa mit
   ausgeklappter Bereichsleiste -, treten zuerst die Beschriftungen zurueck,
   dann die Nebeninformationen. Nichts wird abgeschnitten. */
.kopfzeile { container-type: inline-size; container-name: kopf; }

@container kopf (max-width: 1040px) {
  .sicherungsstand { display: none; }
}
@container kopf (max-width: 940px) {
  .kopfzeile .rechts .knopf .beschriftung { display: none; }
  .kopfzeile .rechts .knopf { padding: 8px 10px; }
}
@container kopf (max-width: 700px) {
  .kennmarke, .stiftmarke { display: none; }
}
@container kopf (max-width: 520px) {
  .zurueckknopf .beschriftung { display: none; }
}

/* Rückfall für Browser ohne Container-Abfragen */
@supports not (container-type: inline-size) {
  @media (max-width: 1400px) {
    html[data-leiste="offen"] .kopfzeile .knopf .beschriftung { display: none; }
    html[data-leiste="offen"] .sicherungsstand { display: none; }
  }
}

/* Steht die Wortmarke schon in der ausgeklappten Bereichsleiste, entfaellt sie
   in der Kopfzeile - der Seitenname bekommt den Platz. */
html[data-leiste="offen"] .kopfzeile .wortmarke { display: none; }
html[data-leiste="offen"] .kopfzeile .kennmarke {
  height: auto; padding: 0; border: none; background: none;
  font-size: 19px; font-weight: 600; color: var(--text);
}

/* =====================================================================
   Ausbaustufe 5 — fester Hinweisbereich
   ===================================================================== */

/* Die Arbeitsfläche teilt sich in Blatt und einen festen Hinweisstreifen
   unten. Alle Hinweise der App erscheinen künftig dort - immer an
   derselben Stelle, immer sichtbar, ohne den Inhalt zu verdecken. */
.werkbank {
  grid-area: arbeitsflaeche;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.arbeitsflaeche { grid-area: auto; flex: 1 1 auto; }

.hinweisbereich {
  flex: none; background: var(--weiss); border-top: 1px solid var(--rand);
  box-shadow: 0 -4px 14px rgba(17,24,39,.06);
  max-height: 34vh; overflow-y: auto; padding: 10px 20px 12px;
}
.hinweisbereich[hidden] { display: none; }

.hinweiskopf {
  display: flex; align-items: center; gap: 9px; margin-bottom: 4px;
}
.hinweiskopf .zeichen {
  width: 19px; height: 19px; border-radius: 50%; background: var(--rot); color: #fff;
  display: grid; place-items: center; font-size: 14.5px; font-weight: 700; flex: none;
}
.hinweiskopf b { font-size: 15.5px; }
.hinweiskopf .schliessen {
  margin-left: auto; border: none; background: none; color: var(--text-leise);
  font-size: 19px; line-height: 1; padding: 3px 7px; border-radius: 6px;
}
.hinweiskopf .schliessen:hover { background: var(--flaeche); color: var(--text); }

.hinweiszeile {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 8px 0 8px 28px; font-size: 14.5px; color: var(--text-leise);
  border-top: 1px solid var(--rand);
}
.hinweiszeile .ort {
  font-weight: 600; color: var(--text); min-width: 96px; font-size: 14px;
}
.hinweiszeile .was { flex: 1; min-width: 220px; }
.hinweiszeile .knopf { flex: none; }

/* =====================================================================
   Ausbaustufe 6 — Wortmarke, Passwortanzeige, Exportknopf
   ===================================================================== */

.wortmarke, .anmeldemarke .name, .markentext {
  background: linear-gradient(100deg, #6f5f45 0%, #8b7757 45%, #b39b74 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: -.02em;
}
html[data-thema="dunkel"] .wortmarke,
html[data-thema="dunkel"] .anmeldemarke .name,
html[data-thema="dunkel"] .markentext {
  background: linear-gradient(100deg, #d9c8a8 0%, #c9b391 45%, #b39b74 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@media (prefers-color-scheme: dark) {
  html[data-thema="system"] .wortmarke,
  html[data-thema="system"] .anmeldemarke .name,
  html[data-thema="system"] .markentext {
    background: linear-gradient(100deg, #d9c8a8 0%, #c9b391 45%, #b39b74 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
/* Rueckfall, wenn der Verlauf im Text nicht getragen wird */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .wortmarke, .anmeldemarke .name, .markentext {
    background: none; color: var(--blau);
  }
}
.wortmarke span, .markentext b { color: inherit; font-weight: 800; }

.anmeldemarke {
  display: flex; align-items: center; gap: 12px;
  font-size: 24px; margin-bottom: 24px;
}
.anmeldemarke img { width: 42px; height: 42px; display: block; flex: none; }

/* --------------------------------------------------------- Passwortanzeige */

.passwortfeld { position: relative; display: block; }
.passwortfeld input { padding-right: 44px; }
.passwortknopf {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; background: none; border-radius: 8px;
  color: var(--text-leise); display: grid; place-items: center; padding: 0;
}
.passwortknopf:hover { background: var(--flaeche); color: var(--text); }
.passwortknopf svg { width: 18px; height: 18px; }
.passwortknopf .zu { display: none; }
.passwortknopf[aria-pressed="true"] .auf { display: none; }
.passwortknopf[aria-pressed="true"] .zu { display: block; }
.passwortknopf[aria-pressed="true"] { color: var(--blau); }


/* Nur eine Anmeldeart? Dann braucht es keine Reiterleiste. */
.anmeldereiter:has(button:only-child) { display: none; }


/* =====================================================================
   Ausbaustufe 7 — Bearbeitungszustände auf dem Blatt
   Alles Gestalterische steht in satz.css; hier nur, was beim Bearbeiten
   sichtbar sein muss.
   ===================================================================== */

.blatt .textblock, .blatt .paneltext, .blatt .hinweisblock, .blatt .bildunterschrift {
  outline: none;
}
.blatt .textblock, .blatt .paneltext, .blatt .hinweisblock { overflow: hidden; }
.blatt .textblock:focus, .blatt .paneltext:focus,
.blatt .hinweisblock:focus, .blatt .bildunterschrift:focus {
  box-shadow: inset 0 0 0 calc(.5 * var(--mm)) rgba(37,99,235,.14);
}

/* ------------------------------------------------------------ Seitennavigation */

.seitenreiter {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  position: sticky; top: 0; z-index: 12; padding: 14px 0 12px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  box-shadow: 0 8px 14px -14px rgba(17,24,39,.55);
  margin-bottom: 18px;
  isolation: isolate;
}
.seitenlauf {
  display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scroll-behavior: smooth; padding: 2px 0 6px;
  scrollbar-width: none;
}
.seitenlauf::-webkit-scrollbar { height: 0; }

.seitenreiterknopf {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rand);
  background: var(--weiss); font-size: 15px; color: var(--text-leise);
  max-width: 190px;
}
.seitenreiterknopf .nummer { font-variant-numeric: tabular-nums; font-weight: 600; }
.seitenreiterknopf .name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14.5px;
}
.seitenreiterknopf:hover { border-color: var(--blau-rand); color: var(--text); }
.seitenreiterknopf.aktiv {
  background: var(--blau); border-color: var(--blau); color: #fff;
}

.rollknopf {
  flex: none; width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--rand); background: var(--weiss); color: var(--text-leise);
  display: grid; place-items: center; padding: 0;
}
.rollknopf svg { width: 15px; height: 15px; }
.rollknopf:hover { color: var(--text); border-color: var(--blau-rand); }
.rollknopf:disabled { opacity: .3; cursor: default; }
.rollknopf[hidden] { display: none; }

.seitenwerkzeuge { display: flex; align-items: center; gap: 6px; flex: none; }
.seitenwerkzeuge button {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--rand);
  background: var(--weiss); font-size: 15px; color: var(--text-leise); white-space: nowrap;
}
.seitenwerkzeuge button:hover { color: var(--text); border-color: var(--blau-rand); }
.seitenwerkzeuge button:disabled { opacity: .38; cursor: default; }
.seitenwerkzeuge .zufuegen { color: var(--blau); font-weight: 500; }

@media (max-width: 900px) {
  .seitenreiter { flex-wrap: wrap; }
  .zoomgruppe { margin-left: 0; }
}

/* In der dreispaltigen Editoransicht ist nicht die Fenster-, sondern die
   verbleibende Mittelspalte entscheidend. Unter 1400 Pixeln bekommt der
   Seitenlauf deshalb eine volle erste Zeile; die Seitenwerkzeuge stehen
   darunter. So bleiben die Seitennummern auch mit beiden Seitenleisten
   sichtbar und die Rollweite kann niemals auf wenige Pixel schrumpfen. */
@media (max-width: 1400px) and (min-width: 761px) {
  .seitenreiter {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto auto;
    gap: 8px;
  }
  .seitenreiter .rollknopf.links { grid-column: 1; grid-row: 1; }
  .seitenreiter .laufhuelle { grid-column: 2; grid-row: 1; min-width: 120px; }
  .seitenreiter .rollknopf.rechts { grid-column: 3; grid-row: 1; }
  .seitenreiter .zoomgruppe { grid-column: 4; grid-row: 1; margin-left: 0; }
  .seitenreiter .seitenwerkzeuge {
    grid-column: 1 / -1; grid-row: 2; min-width: 0; flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .seitenreiter {
    display: grid;
    grid-template-columns: auto minmax(96px, 1fr) auto;
    gap: 7px;
  }
  .seitenreiter .rollknopf.links { grid-column: 1; grid-row: 1; }
  .seitenreiter .laufhuelle { grid-column: 2; grid-row: 1; min-width: 96px; }
  .seitenreiter .rollknopf.rechts { grid-column: 3; grid-row: 1; }
  .seitenreiter .zoomgruppe {
    grid-column: 1 / -1; grid-row: 2; margin-left: 0; justify-self: start;
  }
  .seitenreiter .seitenwerkzeuge {
    grid-column: 1 / -1; grid-row: 3; min-width: 0; flex-wrap: wrap;
  }
}

/* ----------------------------------------------------------- Einstellungen */

.einstellungslayout {
  display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 28px;
  max-width: 940px; margin: 0 auto; padding: 26px 0 60px; align-items: start;
}
.einstellungsnavigation {
  position: sticky; top: 26px;
  display: flex; flex-direction: column; gap: 2px;
}
.einstellungsnavigation h2 {
  font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-leise); margin: 0 0 10px 12px;
}
.einstellungsnavigation a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; font-size: 15.5px;
  color: var(--text-leise); text-decoration: none; border-left: 2px solid transparent;
}
.einstellungsnavigation a:hover { background: var(--weiss); color: var(--text); }
.einstellungsnavigation a.aktiv {
  background: var(--blau-flaeche); color: var(--blau); font-weight: 600;
}
.einstellungsinhalt { min-width: 0; }
.einstellungsinhalt > h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: -.01em; }
.einstellungsinhalt > p.beisatz {
  color: var(--text-leise); margin: 0 0 24px; font-size: 15.5px;
}
.einstellungsgruppe { scroll-margin-top: 24px; }

@media (max-width: 820px) {
  .einstellungslayout { grid-template-columns: 1fr; gap: 14px; }
  .einstellungsnavigation {
    position: static; flex-direction: row; flex-wrap: wrap;
  }
  .einstellungsnavigation h2 { display: none; }
}

.hinweiskasten-dialog {
  background: var(--flaeche); border-radius: var(--radius);
  padding: 13px 15px; font-size: 15.5px; line-height: 1.6; color: var(--text);
}

/* ------------------------------------------------- Texteditor, Punkteliste */

.textwerkzeuge .absatzwahl {
  border: 1px solid var(--eingabe-rand); border-radius: 6px;
  background: var(--eingabe); color: var(--eingabe-text);
  font-size: 14px; padding: 5px 6px; width: 100%;
}
.textwerkzeuge button svg { width: 15px; height: 15px; }

.blatt .punkttitel, .blatt .punkttext { outline: none; }
.blatt .punkttitel:empty::before, .blatt .punkttext:empty::before {
  content: attr(data-platzhalter); color: #9ca3af; font-weight: 400;
}
.listenwerkzeuge button {
  font-size: 12.5px; padding: 3px 7px; border: 1px solid var(--rand);
  border-radius: 5px; background: var(--weiss); color: var(--text-leise);
}
.listenwerkzeuge button:hover { border-color: var(--blau-rand); color: var(--blau); }

/* Bilder ohne Beschreibung werden sichtbar gemacht */
.bildfeld.ohne-beschreibung::after {
  content: "Alt-Text fehlt";
  position: absolute; left: 6px; top: 6px; z-index: 7;
  background: #b0771c; color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; letter-spacing: .01em;
  pointer-events: none;
}

.beschreibungsbild {
  border-radius: 10px; overflow: hidden; background: var(--flaeche);
  margin-bottom: 16px; max-height: 220px; display: grid; place-items: center;
}
.beschreibungsbild img { max-width: 100%; max-height: 220px; display: block; }

/* ------------------------------------------------------- Zweiter Faktor */

.schrittkopf { font-size: 19px; margin: 0 0 6px; }
.qrfeld {
  display: grid; place-items: center; padding: 14px;
  background: #fff; border: 1px solid var(--rand); border-radius: 12px;
  margin: 14px 0;
}
.qrfeld img { width: 190px; height: 190px; display: block; }
.anmeldekarte code {
  display: inline-block; margin-top: 4px; padding: 4px 8px;
  background: var(--flaeche); border-radius: 6px;
  font-family: var(--schrift-mono); font-size: 14.5px; letter-spacing: .06em;
  word-break: break-all;
}
#code {
  width: 100%; text-align: center; letter-spacing: .38em;
  font-size: 22px; font-family: var(--schrift-mono); padding: 12px;
}
.codeliste {
  list-style: none; padding: 0; margin: 14px 0 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.codeliste li {
  background: var(--flaeche); border-radius: 8px; padding: 9px 10px;
  font-family: var(--schrift-mono); font-size: 15.5px; letter-spacing: .06em;
  text-align: center;
}

.textwerkzeuge .absatzkurz {
  font-family: var(--schrift); font-weight: 700; font-size: 13.5px;
  letter-spacing: .01em;
}
.textwerkzeuge .reihe:first-child button { width: 34px; }

/* Die Rollpfeile stehen auf eigener Fläche und werden durch einen weichen
   Verlauf von den Zahlen getrennt - nichts überlappt mehr. */
.laufhuelle { position: relative; flex: 1 1 auto; min-width: 0; }
.seitenlauf { padding: 2px 2px 6px; }
.laufhuelle::before, .laufhuelle::after {
  content: ""; position: absolute; top: 0; bottom: 6px; width: 26px;
  pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 2;
}
.laufhuelle::before {
  left: 0; background: linear-gradient(to right, var(--flaeche) 30%, transparent);
}
.laufhuelle::after {
  right: 0; background: linear-gradient(to left, var(--flaeche) 30%, transparent);
}
.laufhuelle.links-mehr::before, .laufhuelle.rechts-mehr::after { opacity: 1; }

.seitenreiter .rollknopf {
  background: var(--weiss); box-shadow: 0 1px 3px rgba(17,24,39,.10);
  margin-right: 2px;
}
.seitenreiter .rollknopf.rechts { margin-right: 0; margin-left: 2px; }
.seitenreiter .rollknopf:not(:disabled):hover {
  background: var(--blau-flaeche); color: var(--blau); border-color: var(--blau-rand);
}

/* Der gerade betrachtete Abschnitt hebt sich dezent ab. */
.einstellungsgruppe {
  transition: box-shadow .18s, border-color .18s;
  border: 1px solid transparent;
}
.einstellungsgruppe.imblick {
  border-color: var(--blau-rand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.09);
}

/* Freiraum am Ende, damit auch der letzte Abschnitt an den oberen Rand rollen
   kann - sonst bleibt die Bereichsleiste beim vorletzten Eintrag hängen. */
.einstellungsinhalt { padding-bottom: 55vh; }

/* Der sichtbare Ausgang aus Zitat und Codeblock. */
.sonderausgang {
  position: fixed; z-index: 60;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--blau-rand); border-radius: 999px;
  background: var(--weiss); color: var(--blau);
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(17,24,39,.14);
  cursor: pointer;
}
.sonderausgang[hidden] { display: none; }
.sonderausgang svg { width: 13px; height: 13px; }
.sonderausgang:hover { background: var(--blau); color: #fff; border-color: var(--blau); }

/* =====================================================================
   Markenbild — Feinschliff auf allen Bausteinen
   ===================================================================== */

/* Kein Knopf verlässt je sein Elternelement. Reihen brechen um, statt
   überzulaufen; Beschriftungen dürfen kürzen. */
.knopf { min-width: 0; }
.knopf > span, .knopf > b { overflow: hidden; text-overflow: ellipsis; }
.projektkarte .werkzeuge,
.kartenwerkzeuge,
.dialogfuss,
.wahlreihe,
.werkzeugreihe { flex-wrap: wrap; }
.projektkarte .werkzeuge .knopf { flex: 1 1 auto; min-width: 0; }
.projektkarte .werkzeuge .knopf.gefahr { flex: 0 1 auto; }
.projektkarte { overflow: hidden; }

/* Karten und Leisten: weiche Rundung, sehr leiser Schatten. */
.projektkarte, .vorlagenkarte, .baustein, .medienkachel, .einstellungsgruppe,
.dialog, .anmeldekarte, .formatkarte, .themakarte {
  border-radius: var(--radius);
}
.projektkarte:hover, .vorlagenkarte:hover, .baustein:hover, .medienkachel:hover {
  border-color: var(--blau-rand);
  box-shadow: var(--schatten);
}
.dialog, .anmeldekarte { box-shadow: var(--schatten-tief); }

/* Überschriften der Oberfläche in der Hausschrift, ruhig gesetzt. */
h1, h2, h3, .wortmarke, .dokumenttitel, .projektkarte h3 {
  font-family: var(--schrift);
  letter-spacing: -.005em;
}
.wortmarke { font-weight: 600; font-size: 22px; letter-spacing: .01em; }
.wortmarke span { color: var(--blau); }

/* Auszeichner, Marken und Bereichsköpfe: gesperrte Versalien, wie im Satz. */
.bereichskopf, .einstellungsnavigation .kopf, .seitenleiste .gruppentitel,
.vorlagengruppe > .titel {
  text-transform: uppercase; letter-spacing: .14em;
  font-size: 13.5px; color: var(--text-leise);
}

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

.symbolgitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px; margin-top: 12px;
}
.symbolwahl {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px 9px; border-radius: var(--radius);
  border: 1px solid var(--rand); background: var(--weiss);
  color: var(--text-leise); font-size: 13px; text-align: center;
}
.symbolwahl .zeichen { width: 34px; height: 34px; color: var(--text); }
.symbolwahl .zeichen svg { width: 100%; height: 100%; display: block; }
.symbolwahl .name { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.symbolwahl:hover { border-color: var(--blau-rand); background: var(--blau-flaeche); }
.symbolwahl.gewaehlt {
  border-color: var(--blau); color: var(--text);
  box-shadow: 0 0 0 3px var(--blau-flaeche);
}
.symbolwahl.ohne .zeichen { color: var(--text-leise); opacity: .6; }

/* Symbole im Blatt sind anklickbar. */
.blatt .symbol.anklickbar { cursor: pointer; border-radius: 50%; }
.blatt .symbol.anklickbar:hover { box-shadow: 0 0 0 3px var(--blau-flaeche); }
.blatt .symbol.leer { opacity: 0; }
.blatt .symbol.leer:hover { opacity: .35; }

/* Infokasten und Schrittliste im Editor bedienbar halten. */
.blatt .infokasten .titel:focus, .blatt .infokasten .inhalt:focus { outline: none; }

/* ------------------------------------------------- Arbeitet gerade (Export) */

/* Wichtig: Die eigene display-Regel schlaegt das eingebaute [hidden] des
   Browsers. Ohne diese Zeile bliebe der Schleier nach dem Export stehen. */
.arbeitet[hidden] { display: none; }

.arbeitet {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(42, 38, 34, .28);
  backdrop-filter: blur(1.5px);
}
.arbeitet .kern {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 26px; border-radius: var(--radius);
  background: var(--weiss); color: var(--text);
  border: 1px solid var(--rand); box-shadow: var(--schatten-tief);
  font-size: 17px;
}
.kreisel {
  width: 20px; height: 20px; flex: none;
  border: 2px solid var(--blau-rand); border-top-color: var(--blau);
  border-radius: 50%; animation: kreiseln .8s linear infinite;
}
@keyframes kreiseln { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kreisel { animation-duration: 2.4s; }
}

/* Auch der Knopf selbst zeigt, dass er beschäftigt ist. */
.knopf.arbeitet { opacity: .75; pointer-events: none; }
.knopf.arbeitet svg { animation: pulsen 1.1s ease-in-out infinite; }
@keyframes pulsen { 50% { opacity: .35; } }

/* =====================================================================
   Schriftgrade der Oberflaeche — eine Leiter statt vieler Einzelwerte

   Vorher standen ueber vierzig verschiedene Groessen im Blatt; das wirkt
   unruhig. Alles folgt jetzt fuenf Stufen, die aus der Grundgroesse
   abgeleitet sind.
   ===================================================================== */

/* Die Stufenleiter der Oberflaeche steht weiter unten im Abschnitt
   "Oberflaechen- und Responsivsystem 2026" - dort und nur dort. Hier stand
   frueher eine zweite, abweichende Definition (23/20/19/17.5/15), die von der
   spaeteren stillschweigend ueberschrieben wurde: im Browser kamen nie die
   Werte an, die hier zu lesen waren. */

.beisatz, .leiseinfo, .angaben, .baustein span, .vorlagenkarte .name,
.medienkopf, .stand, .projektkarte .angaben, .einstellungszeile .beisatz {
  font-size: var(--grad-neben);
}

/* Der Hinweisstreifen liest sich wie die Seitenleiste, nicht kleiner. */
.hinweisbereich { padding: 12px 20px 14px; }
.hinweiskopf b { font-size: var(--grad-normal); }
.hinweiskopf .zeichen { width: 21px; height: 21px; font-size: 15px; }
.hinweiszeile {
  font-size: var(--grad-neben); padding: 10px 0 10px 30px;
  color: var(--text-leise);
}
.hinweiszeile .ort { font-size: var(--grad-neben); min-width: 104px; }
.hinweiszeile .knopf { font-size: var(--grad-neben); }

.knopf { font-size: var(--grad-neben); }
.knopf.klein { font-size: var(--grad-neben); padding: 5px 11px; }
.werkzeug, .seitenleiste a, .einstellungsnavigation a { font-size: var(--grad-neben); }
.projektkarte h3, .dialog h2, .einstellungsgruppe > h3 { font-size: var(--grad-mittel); }
.bereichskopf, .seitenleiste .gruppentitel, .vorlagengruppe > .titel,
.einstellungsnavigation .kopf { font-size: var(--grad-marke-ui); }
.vorlagenkarte .name, .medienkachel .name { font-size: var(--grad-neben); }
.feldgruppe label { font-size: var(--grad-neben); }

/* =====================================================================
   [hidden] muss immer gewinnen

   Eine eigene display-Regel schlaegt das eingebaute [hidden] des Browsers.
   Genau daran blieb der Ausgabeschleier haengen. Statt jede betroffene
   Klasse einzeln nachzutragen - und die naechste wieder zu vergessen -
   gilt die Regel hier fuer alles. Wer ein Element sichtbar halten will,
   nimmt das Attribut weg; genau dafuer ist es da.
   ===================================================================== */

[hidden] { display: none !important; }

/* =====================================================================
   Startseite: Vorstellung, Anmeldung, Warteliste
   ===================================================================== */

body.anmeldeseite {
  display: block; padding: 0;
  background:
    radial-gradient(1200px 520px at 18% -8%, rgba(139,119,87,.10), transparent 70%),
    var(--flaeche);
}

.startseite {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 56px; align-items: start;
  max-width: 1180px; margin: 0 auto; padding: 56px 28px 48px;
}
@media (max-width: 960px) {
  .startseite { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 32px 20px; }
}

.anmeldemarke.gross { font-size: 28px; gap: 13px; margin-bottom: 34px; }
.anmeldemarke.gross img { width: 44px; height: 44px; }

.schlagzeile {
  font-size: clamp(36px, 4.2vw, 52px); line-height: 1.12;
  letter-spacing: -.012em; margin: 0 0 20px; font-weight: 600;
}
.vorstellung .fliesstext {
  font-size: 21px; line-height: 1.62; color: var(--text-leise);
  max-width: 34em; margin: 0 0 34px;
}

.merkmale { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.merkmale li { display: flex; gap: 15px; align-items: flex-start; }
.merkmale .zeichen {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--blau-rand); color: var(--blau);
  background: var(--weiss);
}
.merkmale .zeichen svg { width: 21px; height: 21px; }
.merkmale b { display: block; font-size: var(--grad-normal); font-weight: 600; }
.merkmale span:not(.zeichen) {
  display: block; font-size: var(--grad-neben); color: var(--text-leise);
  line-height: 1.55; margin-top: 3px;
}

.startspalte { display: grid; gap: 18px; }

/* Die Anmeldekarte übernimmt die Schriftgrade der Anwendung. */
.anmeldekarte { width: 100%; padding: 30px 30px 26px; box-shadow: var(--schatten-tief); }
.anmeldekarte h1 { font-size: var(--grad-gross); margin: 0 0 8px; }
.anmeldekarte .beisatz { font-size: var(--grad-neben); margin: 0 0 22px; }
.anmeldekarte label, .wartelistenkarte label { font-size: var(--grad-neben); }
.anmeldekarte input, .wartelistenkarte input[type="email"] { font-size: var(--grad-normal); }
.anmeldekarte .knopf, .wartelistenkarte .knopf { font-size: var(--grad-normal); padding: 11px 18px; }
.anmeldefuss { font-size: var(--grad-neben); }
.passworthinweis, .anmeldefehler { font-size: var(--grad-neben); }

.wartelistenkarte {
  background: var(--weiss); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 24px 26px;
  box-shadow: var(--schatten);
}
.wartelistenkarte h2 { font-size: var(--grad-mittel); margin: 0 0 6px; }
.wartelistenkarte .beisatz {
  font-size: var(--grad-neben); color: var(--text-leise);
  line-height: 1.55; margin: 0 0 18px;
}
.zustimmung {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--grad-neben); color: var(--text-leise); line-height: 1.5;
  margin: 4px 0 16px;
}
.zustimmung input { margin-top: 3px; flex: none; }
.wartedank {
  font-size: var(--grad-normal); color: var(--gruen);
  background: rgba(95,115,85,.10); border-radius: var(--radius-klein);
  padding: 12px 14px; margin: 0;
}

/* Die Cookie-Leiste liegt fest am unteren Rand. Auf der Startseite wuerde sie
   sonst den Wartelisten-Knopf verdecken - deshalb bekommt die Seite unten
   Platz, solange der Hinweis steht. */
body.anmeldeseite .startseite { padding-bottom: 220px; }
body.anmeldeseite.ohne-hinweis .startseite { padding-bottom: 48px; }

/* =====================================================================
   Der Begleiter — feste Spalte rechts neben der Seite

   Alles, was beim Arbeiten an einer Seite gebraucht wird, hat hier seinen
   festen Ort: die Werkzeuge des Textes, gruppiert nach Aufgabe, und
   darunter die Hinweise der Anwendung. Nichts springt mehr, nichts legt
   sich über das Blatt.
   ===================================================================== */

.begleiter {
  grid-area: begleiter;
  background: var(--weiss);
  border-left: 1px solid var(--rand);
  overflow-y: auto; overflow-x: hidden; min-height: 0; min-width: 0;
  display: flex; flex-direction: column;
}

.begleitergruppe { border-bottom: 1px solid var(--rand); padding: 16px 18px 18px; }
.begleitergruppe:last-child { border-bottom: none; }

.begleiterkopf {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 13px; color: var(--text);
  font-size: var(--grad-neben); font-weight: 600;
}
.begleiterkopf svg { width: 17px; height: 17px; color: var(--blau); flex: none; }
.begleiterkopf .zahl {
  margin-left: auto; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 999px; background: var(--blau-flaeche); color: var(--blau);
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.begleiterkopf .zahl.ruhig { background: var(--flaeche); color: var(--text-leise); }

/* Die Werkzeuge liegen in einem gleichmäßigen Raster. */
.werkzeugraster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.werkzeugraster button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; height: 54px; padding: 6px 3px;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--weiss); color: var(--text);
  font-size: 12.5px; line-height: 1.15; text-align: center; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.werkzeugraster button svg { width: 17px; height: 17px; }
.werkzeugraster button .absatzkurz { font-size: 15px; font-weight: 700; }
.werkzeugraster button:hover:not(:disabled) {
  border-color: var(--blau-rand); background: var(--blau-flaeche); color: var(--blau);
}
.werkzeugraster button.aktiv {
  border-color: var(--blau); background: var(--blau-flaeche); color: var(--blau);
}
.werkzeugraster button:disabled { opacity: .38; cursor: default; }
.werkzeugraster .name {
  display: block; max-width: 100%;
  /* Umbruch nur zwischen Wörtern - ein zerrissenes "Ver-weis" liest sich
     schlechter als ein etwas kleineres Wort. */
  white-space: normal; overflow-wrap: normal; word-break: keep-all;
  hyphens: none; line-height: 1.12; font-size: 12px;
}

.begleiterhinweis {
  font-size: var(--grad-neben); color: var(--text-leise);
  line-height: 1.5; margin: 0;
}

/* Publication Intelligence: ein positiver Begleiter statt eines technischen
   Kontrollzentrums. Die Formensprache folgt dem appweiten Styleguide. */
.pi-seitenkopf {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 36px;
  align-items: center; gap: 11px; margin-bottom: 16px;
}
.pi-seitenkopf h2 {
  min-width: 0; margin: 0; color: var(--text);
  font-size: 18px; font-weight: 600; line-height: 1.2;
}
.pi-marke {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  color: var(--blau); filter: drop-shadow(0 5px 10px color-mix(in srgb, var(--blau) 18%, transparent));
}
.pi-marke svg { width: 29px; height: 29px; }
.pi-infoknopf {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--rand); border-radius: 50%; color: var(--text-leise);
  background: color-mix(in srgb, var(--weiss) 92%, transparent); text-decoration: none;
}
.pi-infoknopf:hover { color: var(--text); border-color: var(--blau-rand); }
.pi-infoknopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.pi-infoknopf svg { width: 17px; height: 17px; }
.pi-projektstatus {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 15px;
  min-height: 128px; margin: 0 0 16px; padding: 20px 18px;
  border: 1px solid color-mix(in srgb, var(--gruen) 55%, var(--blau-rand));
  border-radius: 18px; color: var(--text);
  background:
    radial-gradient(circle at 86% 24%, color-mix(in srgb, var(--blau) 15%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 70%, color-mix(in srgb, var(--gruen) 19%, transparent) 0 3px, transparent 4px),
    linear-gradient(112deg,
      color-mix(in srgb, var(--gruen) 16%, var(--weiss)),
      color-mix(in srgb, var(--blau) 8%, var(--weiss)) 62%,
      color-mix(in srgb, var(--gruen) 8%, var(--weiss)));
  box-shadow: 0 14px 36px color-mix(in srgb, var(--gruen) 9%, transparent);
}
.pi-projektstatus::after {
  content: "✦"; position: absolute; z-index: -1; right: 17px; top: 9px;
  color: color-mix(in srgb, var(--gruen) 34%, transparent); font-size: 28px;
}
.pi-projektstatus .pi-zustandszeichen {
  width: 58px; height: 58px; flex: none; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--gruen) 58%, var(--rand));
  border-radius: 50%; color: var(--gruen);
  background: color-mix(in srgb, var(--gruen) 15%, var(--weiss));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
    0 8px 18px color-mix(in srgb, var(--gruen) 14%, transparent);
}
.pi-projektstatus .pi-zustandszeichen svg { width: 30px; height: 30px; }
.pi-projektstatus > div { min-width: 0; display: grid; gap: 4px; }
.pi-projektstatus strong { font-size: 18px; line-height: 1.25; }
.pi-projektstatus > div > span {
  color: var(--text-leise); font-size: 14px; line-height: 1.45;
}
.pi-projektstatus.ist-ruhig { text-align: left; }
.pi-projektstatus.hat-hinweise {
  border-color: color-mix(in srgb, var(--gruen) 46%, var(--blau-rand));
}
.pi-projektstatus.laedt { opacity: .76; }

/* Hinweise und Warnungen */
.befundliste { display: grid; gap: 9px; }
.befund {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 12px; border-radius: var(--radius-klein);
  border: 1px solid var(--rand); background: var(--flaeche);
  font-size: var(--grad-neben); line-height: 1.45; color: var(--text);
}
.befund .zeichen { flex: none; width: 19px; height: 19px; margin-top: 1px; }
.befund .zeichen svg { width: 100%; height: 100%; }
.befund.warnung { border-color: rgba(164,88,74,.35); }
.befund.warnung .zeichen { color: var(--rot); }
.befund.merke .zeichen { color: var(--blau); }
.befund .ort {
  display: block; font-weight: 600; font-size: 14.5px;
  color: var(--text-leise); margin-bottom: 2px;
}
.befund .knopf { margin-top: 9px; }
.befund > div { min-width: 0; }
.befundleer {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--grad-neben); color: var(--text-leise);
}
.befundleer svg { width: 18px; height: 18px; color: var(--gruen); flex: none; }

.pi-befund {
  display: block; padding: 0; overflow: hidden; cursor: default;
  border-color: color-mix(in srgb, var(--blau) 48%, var(--rand));
  border-radius: 15px; background: color-mix(in srgb, var(--weiss) 96%, var(--blau) 4%);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 6%, transparent);
}
.pi-befundkopf {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 38px 38px;
  align-items: center; gap: 9px; padding: 12px;
}
.pi-befundkopf > .zeichen {
  width: 40px; height: 40px; margin: 0; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 50%; background: color-mix(in srgb, currentColor 12%, var(--weiss));
}
.pi-befundkopf > .zeichen svg { width: 20px; height: 20px; }
.pi-befundueberblick {
  min-width: 0; display: grid; gap: 2px; padding: 2px 3px;
  border: 0; border-radius: 8px; background: none; color: inherit; text-align: left;
}
.pi-befundueberblick:hover .befundtitel { color: var(--blau); }
.pi-befundueberblick:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.pi-befundueberblick .befundtitel { margin: 0; font-size: 15px; line-height: 1.32; }
.pi-befundueberblick .ort { margin: 0; font-size: 13px; font-weight: 500; }
.pi-befundaktion {
  width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--rand); border-radius: 11px;
  color: var(--text-leise); background: color-mix(in srgb, var(--weiss) 90%, transparent);
}
.pi-befundaktion:hover { color: var(--text); border-color: var(--blau-rand); }
.pi-befundaktion:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.pi-befundaktion svg { width: 18px; height: 18px; }
.pi-erledigt:hover {
  color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 58%, var(--rand));
  background: color-mix(in srgb, var(--gruen) 11%, var(--weiss));
}
.pi-aufklappzeichen {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; color: var(--text-leise);
  transform: rotate(45deg); transition: transform .15s ease;
}
.pi-befund.offen .pi-aufklappzeichen { transform: rotate(225deg); }
.pi-befundinhalt {
  margin: 0 12px 12px; padding: 15px 16px;
  border: 1px solid var(--rand); border-radius: 12px;
  background: color-mix(in srgb, var(--flaeche) 74%, var(--weiss));
  color: var(--text); font-size: 14px; line-height: 1.45;
}
.pi-befundinhalt > p { margin: 0; }
.pi-befundinhalt .fundzitat { margin: 0 0 10px; }
.pi-befundinhalt .befundaktionen,
.pi-befundinhalt .aktionszeile { padding-top: 12px; border-top: 1px solid var(--rand); }
.pi-hinweisgrenze {
  display: block; margin-top: 8px; color: var(--text-leise); font-size: 12.5px;
}
.pi-befund.warnung .zeichen,
.pi-befund.publikationswarnung.critical .zeichen { color: var(--rot); }
.pi-befund.merke .zeichen,
.pi-befund.publikationswarnung.info .zeichen { color: #779cbc; }
.pi-befund.publikationswarnung.warning .zeichen { color: #b98a48; }

@media (max-width: 360px) {
  .pi-befundkopf { grid-template-columns: 36px minmax(0, 1fr) 34px 34px; gap: 6px; padding: 10px; }
  .pi-befundkopf > .zeichen { width: 36px; height: 36px; }
  .pi-befundaktion { width: 34px; height: 34px; }
  .pi-projektstatus { align-items: flex-start; padding: 17px 15px; }
  .pi-projektstatus .pi-zustandszeichen { width: 48px; height: 48px; }
}

/* Redaktionelle Publikationsprüfung: warme, nicht blockierende Markierungen. */
::highlight(publication-critical) {
  background: rgba(220, 38, 38, .22); text-decoration: underline 2px #b91c1c;
}
::highlight(publication-warning) {
  background: rgba(217, 119, 6, .20); text-decoration: underline 2px #b45309;
}
::highlight(publication-info) {
  background: rgba(37, 99, 235, .13); text-decoration: underline 1.5px #2563eb;
}
.publikationsfundstelle.critical { box-shadow: inset 0 -3px rgba(220, 38, 38, .7); }
.publikationsfundstelle.warning { box-shadow: inset 0 -3px rgba(217, 119, 6, .65); }
.publikationsfundstelle.info { box-shadow: inset 0 -2px rgba(37, 99, 235, .55); }
.fundstelle-puls { animation: fundstelle-puls 1.8s ease-out; }
@keyframes fundstelle-puls {
  0%, 35% { outline: 3px solid rgba(37, 99, 235, .72); outline-offset: 3px; }
  100% { outline: 3px solid transparent; outline-offset: 8px; }
}

.befund.publikationswarnung { cursor: pointer; }
.befund.publikationswarnung.critical {
  border-color: rgba(185, 28, 28, .42); background: rgba(254, 242, 242, .72);
}
.befund.publikationswarnung.warning {
  border-color: rgba(180, 83, 9, .32); background: rgba(255, 247, 237, .72);
}
.befund.publikationswarnung.info {
  border-color: rgba(37, 99, 235, .25); background: rgba(239, 246, 255, .65);
}
.befund.publikationswarnung.critical .zeichen { color: #b91c1c; }
.befund.publikationswarnung.warning .zeichen { color: #b45309; }
.befund.publikationswarnung.info .zeichen { color: var(--blau); }
.befundtitel { display: block; margin: 1px 0 5px; }
.fundzitat {
  display: block; margin: 5px 0; padding-left: 8px; border-left: 2px solid var(--rand-stark);
  color: var(--text); font-size: 14px; overflow-wrap: anywhere;
}
.befund.publikationswarnung p { margin: 6px 0; }
.konfidenz { display: block; color: var(--text-leise); font-size: 13.5px; }
.befundaktionen { display: flex; gap: 6px; flex-wrap: wrap; }
.befundaktionen .knopf { margin-top: 8px; }
.publikationswarnung details { margin-top: 8px; color: var(--text-leise); }
.publikationswarnung summary { cursor: pointer; font-size: 13.5px; }
.publikationswarnung details p { font-size: 13.5px; overflow-wrap: anywhere; }

.pruefknopf { position: relative; }
.pruefzahl {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff3cd; color: #92400e; font-size: 12.5px; font-weight: 700;
}
.publikationsreview { display: grid; gap: 15px; }
.revieweinleitung h3 { margin: 0 0 6px; font-size: 18px; }
.revieweinleitung p, .reviewfuss {
  margin: 0; color: var(--text-leise); line-height: 1.55; font-size: 14.5px;
}
.reviewsteuerung {
  display: flex; gap: 18px; align-items: end; flex-wrap: wrap;
  padding: 12px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche);
}
.reviewsteuerung label { display: grid; gap: 5px; font-size: 14px; font-weight: 600; }
.reviewsteuerung select {
  min-width: 210px; padding: 8px 10px; border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein); background: var(--weiss); color: var(--text);
}
.reviewsteuerung .reviewhaken { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; }
.reviewzahlen {
  padding: 10px 12px; border-radius: var(--radius-klein);
  background: var(--blau-flaeche); color: var(--text); font-size: 14.5px; font-weight: 600;
}
.reviewliste { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; padding-right: 3px; }
.reviewleer { margin: 0; padding: 22px; text-align: center; color: var(--text-leise); }
.reviewzeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;
  border: 1px solid var(--rand); border-left-width: 4px; border-radius: var(--radius-klein);
  background: var(--weiss); padding: 8px;
}
.reviewzeile.critical { border-left-color: #b91c1c; }
.reviewzeile.warning { border-left-color: #b45309; }
.reviewzeile.info { border-left-color: var(--blau); }
.reviewzeile > button:first-child {
  display: grid; gap: 3px; min-width: 0; border: 0; background: transparent;
  color: var(--text); text-align: left; padding: 2px 4px;
}
.reviewzeile > button:first-child:hover strong { color: var(--blau); }
.reviewzeile .ort { color: var(--text-leise); font-size: 13.5px; }
.reviewzeile q { color: var(--text-leise); font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.reviewaktionen { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.reviewfuss { border-top: 1px solid var(--rand); padding-top: 12px; }

@media (max-width: 1400px) {
  .app { grid-template-columns: var(--leiste-breite) 296px minmax(0, 1fr) 290px; }
  .werkzeugraster { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1180px) and (min-width: 761px) {
  .app {
    grid-template-columns: var(--leiste-breite) 296px minmax(0, 1fr);
    grid-template-areas:
      "werkzeugleiste blattkopf    kopfzeile"
      "werkzeugleiste seitenleiste arbeitsflaeche";
  }
  .begleiter { display: none; }
}
@media (max-width: 760px) {
  .begleiter { display: none; }
}

/* Im Begleiter ist die Werkzeugleiste kein schwebendes Fenster mehr,
   sondern Teil der Spalte. Die alten Regeln werden hier zurückgenommen. */
#begleiter .textwerkzeuge {
  position: static; inset: auto;
  display: block; width: auto; max-width: none;
  background: none; border: none; box-shadow: none;
  padding: 0; margin: 0; border-radius: 0; z-index: auto;
}
#begleiter .textwerkzeuge .reihe,
#begleiter .textwerkzeuge .trenner { display: none; }

/* Die alte Leiste gab jedem Knopf feste 30 x 30 Pixel - im Raster des
   Begleiters füllen sie ihre Zelle. */
#begleiter .werkzeugraster button {
  width: auto; height: 62px;
  border: 1px solid var(--rand); background: var(--weiss);
  border-radius: var(--radius-klein); color: var(--text);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; padding: 6px 3px;
  font-size: 12px; line-height: 1.15;
}
#begleiter .werkzeugraster button svg { width: 17px; height: 17px; }

/* Drei Spalten geben den Beschriftungen Platz. */
.werkzeugraster {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.werkzeugraster button { height: 62px; font-size: 12px; padding: 6px 2px; }

@media (max-width: 1400px) { .werkzeugraster { grid-template-columns: repeat(3, 1fr); } }

/* Landingpage-Bausteine im Editor: Ziel- und Wahlknöpfe */
.blatt .zielknopf {
  border: 1px solid var(--rand); border-radius: 999px;
  background: var(--weiss); color: var(--text-leise);
  font-size: 13px; padding: 3px 10px; cursor: pointer; white-space: nowrap;
}
.blatt .zielknopf:hover { border-color: var(--blau-rand); color: var(--blau); }
.blatt .webmarke { pointer-events: none; }

/* =====================================================================
   Startseite — Warteliste zuerst, Anmeldung darunter

   Die Seite ist zuerst eine Einladung und erst danach ein Zugang. Deshalb
   steht die Warteliste oben und in kräftiger Fassung, die Anmeldung
   darunter in ruhiger. Beide Themen teilen dieselben Variablen; die
   Startseite braucht keine eigenen Farben.
   ===================================================================== */

.schlagzeile .hervor { color: var(--blau); }

/* Zierlinie mit Raute, wie im Entwurf */
.zierlinie {
  display: flex; align-items: center; gap: 0; margin: 0 0 26px; width: 220px;
}
.zierlinie span {
  flex: 1; height: 1px;
  background: linear-gradient(to right, var(--blau-rand), transparent);
}
.zierlinie i {
  width: 7px; height: 7px; transform: rotate(45deg);
  border: 1px solid var(--blau-rand); flex: none;
}

/* --- Wartelistenkarte: das erste, was ins Auge fällt */
.wartelistenkarte {
  position: relative;
  border: 1px solid var(--blau-rand);
  box-shadow: var(--schatten-tief);
  padding: 30px 30px 28px;
}
.kartenzeichen {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--blau-rand); color: var(--blau);
  margin-bottom: 20px;
}
.kartenzeichen svg { width: 24px; height: 24px; }
.wartelistenkarte h2 { font-size: var(--grad-gross); margin: 0 0 2px; }
.wartelistenkarte .unterzeile {
  color: var(--blau); font-size: var(--grad-mittel); margin: 0 0 14px;
}

.feldmitzeichen { position: relative; display: block; }
.feldmitzeichen input { width: 100%; padding-right: 44px; }
.feldmitzeichen svg {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--text-leise); pointer-events: none;
}

.zustimmung .kleingedrucktes {
  display: block; margin-top: 6px; font-size: 15.5px; color: var(--text-leise);
}
.zustimmung a { color: var(--blau); }

.knopf.voll.gross {
  width: 100%; justify-content: center; gap: 10px;
  padding: 15px 20px; font-size: var(--grad-mittel);
  border-radius: 10px;
}
.knopf.voll.gross svg { width: 19px; height: 19px; }
.knopf.voll.gross:disabled { opacity: .45; }

/* --- Anmeldung: bewusst zurückhaltend */
.anmeldekarte.kompakt { padding: 22px 26px 22px; }
.zugangkopf {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--grad-neben); font-weight: 600; color: var(--text-leise);
  margin: 0 0 16px;
}
.zugangkopf svg { width: 18px; height: 18px; color: var(--blau); flex: none; }
.anmeldekarte.kompakt .anmeldereiter { margin-bottom: 14px; }

/* --- Fuß */
.anmeldefuss {
  text-align: center; color: var(--text-leise);
  margin: 8px 0 0; line-height: 1.6;
}
.fussmarke { display: block; margin: 0 auto 8px; width: 24px; height: 24px; color: var(--blau); }
.fussmarke svg { width: 100%; height: 100%; }
.anmeldefuss .leise { color: var(--text-leise); opacity: .75; font-size: 16px; }

/* Auf schmalen Fenstern stehen die Karten untereinander. */
@media (max-width: 960px) {
  .wartelistenkarte, .anmeldekarte { padding: 24px 22px; }
}

/* Im dunklen Thema heben sich die Karten sonst kaum vom Grund ab: ein
   sehr leichter Verlauf und ein warmer Schimmer an der Warteliste. */
html[data-thema="dunkel"] .wartelistenkarte,
html[data-thema="dunkel"] .anmeldekarte {
  background-image: linear-gradient(160deg, rgba(201,179,145,.055), transparent 60%);
}
html[data-thema="dunkel"] .wartelistenkarte {
  box-shadow: var(--schatten-tief), 0 0 0 1px rgba(201,179,145,.16);
}
@media (prefers-color-scheme: dark) {
  html[data-thema="system"] .wartelistenkarte,
  html[data-thema="system"] .anmeldekarte {
    background-image: linear-gradient(160deg, rgba(201,179,145,.055), transparent 60%);
  }
  html[data-thema="system"] .wartelistenkarte {
    box-shadow: var(--schatten-tief), 0 0 0 1px rgba(201,179,145,.16);
  }
}

/* =====================================================================
   Verbindliche UI-Grundregeln

   Eingaben, Auswahlfelder, Aktionszeilen und bestätigende Dialoge folgen
   appweit denselben Maßen. Inhaltsaktionen stehen immer in einer eigenen,
   rechtsbündigen Zeile und verändern dadurch niemals den Textdurchschuss.
   ===================================================================== */

select,
textarea,
input[type=text]:not(.dokumenttitel),
input[type=password],
input[type=search],
input[type=number],
input[type=email],
input[type=url] {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--eingabe-rand);
  border-radius: var(--radius);
  background: var(--eingabe);
  color: var(--eingabe-text);
}
textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
select:focus, textarea:focus,
input[type=text]:not(.dokumenttitel):focus, input[type=password]:focus,
input[type=search]:focus, input[type=number]:focus,
input[type=email]:focus, input[type=url]:focus {
  outline: none;
  border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(139, 119, 87, .18);
}

input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px; min-width: 20px;
  margin: 0;
  border: 1.5px solid var(--eingabe-rand);
  border-radius: 6px;
  background: var(--eingabe);
  display: inline-grid; place-items: center;
  vertical-align: middle;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
input[type=checkbox]::after {
  content: "";
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .12s;
}
input[type=checkbox]:checked { background: var(--blau); border-color: var(--blau); }
input[type=checkbox]:checked::after { transform: rotate(45deg) scale(1); }
input[type=checkbox]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(139, 119, 87, .22);
}
input[type=checkbox]:disabled { opacity: .58; cursor: not-allowed; }

.pi-befundnachweis { border-top: 1px solid var(--rand); padding-top: 8px; }
.pi-befundnachweis summary { color: var(--text-leise); cursor: pointer; font-size: var(--grad-klein-ui); }
.pi-befundnachweis p { color: var(--text-leise); font-size: var(--grad-klein-ui); margin: 8px 0 0; }
.pi-evidenzliste {
  margin: 8px 0 0; padding: 0 0 0 18px; color: var(--text-leise);
  font-size: var(--grad-klein-ui); line-height: 1.45;
}
.pi-evidenzliste li + li { margin-top: 3px; }

.aktionszeile, .befundaktionen, .reviewaktionen {
  display: flex; width: 100%; gap: 7px; flex-wrap: wrap;
  justify-content: flex-end; align-items: center;
  clear: both; margin-top: 11px;
}
.aktionszeile .knopf, .befundaktionen .knopf, .reviewaktionen .knopf {
  margin-top: 0;
}

.dialogerklaerung {
  display: grid; grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px; align-items: start;
  color: var(--text); line-height: 1.55;
}
.dialogerklaerung-symbol {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--blau); background: var(--blau-flaeche);
  border: 1px solid var(--blau-rand);
}
.dialogerklaerung.warnung .dialogerklaerung-symbol {
  color: var(--rot); background: color-mix(in srgb, var(--rot) 8%, var(--weiss));
  border-color: color-mix(in srgb, var(--rot) 32%, var(--rand));
}
.dialogerklaerung-symbol svg { width: 21px; height: 21px; }
.dialogerklaerung p { margin: 2px 0 0; }

/* Projekt- und Vorlagenwahl erklärt nicht nur Maße, sondern den Einsatz. */
.wahlreihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 9px;
}
.wahlmarke {
  border-radius: var(--radius); padding: 11px 13px;
  display: grid; gap: 3px; text-align: left;
}
.wahlmarke strong { font-size: var(--grad-neben); }
.wahlmarke small { color: var(--text-leise); font-size: 14px; line-height: 1.3; }
.formatgitter { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
.formatkarte .beispiel {
  color: var(--text-leise); font-size: 13.5px; line-height: 1.25; text-align: center;
}
.vorlagenkarte .name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
.vorlagenbeispiel {
  display: block; margin-top: 3px; min-height: 2.4em;
  color: var(--text-leise); font-size: 13.5px; line-height: 1.2; text-align: center;
}

.feedbackzeile {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  margin-top: 9px; color: var(--text-leise); font-size: 13.5px;
}
.feedbackknopf {
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--rand); background: var(--weiss); color: var(--text-leise);
}
.feedbackknopf svg { width: 15px; height: 15px; }
.feedbackknopf.down svg { transform: rotate(180deg); }
.feedbackknopf:hover, .feedbackknopf[aria-pressed="true"] {
  color: var(--blau); border-color: var(--blau-rand); background: var(--blau-flaeche);
}
.feedbackformular {
  width: 100%; display: grid; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--rand);
}
.feedbackformular label { display: grid; gap: 6px; color: var(--text); font-size: 14px; }
.feedbackformular textarea { width: 100%; font-size: 15px; }
.pi-gelernt { color: var(--blau); }
.pi-begriffswahl { display: grid; gap: 12px; }
.pi-begriffswahl p { margin: 0; line-height: 1.55; }
.pi-begriffsvarianten { display: flex; flex-wrap: wrap; gap: 8px; }

/* Das Prüfzentrum zeigt Status nach Bereichen statt eines unklaren
   Gesamtscores. Jede Karte bleibt direkt mit den Befunden verknüpft. */
.pi-pruefzentrum-inhalt { display: grid; gap: 18px; }
.pi-pruefzentrum-inhalt h3 { margin: 4px 0 -7px; font-size: 19px; }
.pi-pruefzentrum-intro {
  padding: 15px 17px; border: 1px solid var(--blau-rand);
  border-radius: var(--radius); background: var(--blau-flaeche);
}
.pi-pruefzentrum-intro strong { font-size: 18px; }
.pi-pruefzentrum-intro p { margin: 5px 0 0; color: var(--text-leise); line-height: 1.5; }
.pi-ursprungsuebersicht {
  display: grid; gap: 13px; padding: 16px; border: 1px solid var(--rand);
  border-radius: var(--radius); background: color-mix(in srgb, var(--flaeche) 94%, var(--blau) 6%);
}
.pi-ursprungskopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pi-ursprungskopf > div { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.pi-ursprungskopf strong { display: block; font-size: 18px; }
.pi-ursprungskopf p { margin: 4px 0 0; color: var(--text-leise); line-height: 1.48; }
.pi-ursprungskarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pi-ursprungskarte { padding: 11px 12px; border: 1px solid var(--rand); border-radius: 9px; }
.pi-ursprungskarte.angegeben { border-left: 3px solid var(--gruen); }
.pi-ursprungskarte.hinweis { border-left: 3px solid #b45309; }
.pi-ursprungskarte.teilpruefung { border-left: 3px solid var(--blau); }
.pi-ursprungskarte.offen { border-left: 3px solid var(--text-leise); }
.pi-ursprungskarte p { margin: 4px 0 0; color: var(--text-leise); line-height: 1.4; }
.pi-ursprungsmerksatz {
  margin: 0; padding-top: 10px; border-top: 1px solid var(--rand);
  color: var(--text-leise); line-height: 1.48;
}
.pi-ursprungsdialog { display: grid; gap: 14px; }
.pi-bereitschaftskarten {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.pi-bereitschaftskarte {
  min-width: 0; min-height: 116px; padding: 12px;
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  border: 1px solid var(--rand); border-left: 4px solid var(--rand-stark);
  border-radius: var(--radius); background: var(--weiss); color: var(--text);
  text-align: left;
}
.pi-bereitschaftskarte:hover { border-color: var(--blau-rand); box-shadow: var(--schatten); }
.pi-bereitschaftskarte.critical { border-left-color: #b91c1c; }
.pi-bereitschaftskarte.attention { border-left-color: #b45309; }
.pi-bereitschaftskarte.notice { border-left-color: var(--blau); }
.pi-bereitschaftskarte.ready { border-left-color: var(--gruen); }
.pi-kartenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.pi-kartenkopf b {
  min-width: 25px; height: 25px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; background: var(--flaeche); font-size: 13px;
}
.pi-bereitschaftskarte > span:not(.pi-kartenkopf) {
  color: var(--text-leise); font-size: 14px; line-height: 1.25;
}
.pi-bereitschaftskarte small { margin-top: auto; color: var(--text-leise); font-weight: 600; }
.pi-pruefzentrum-befunde { display: grid; gap: 8px; }
.pi-zentrumbefund {
  padding: 12px 14px; border: 1px solid var(--rand); border-left: 4px solid var(--blau);
  border-radius: var(--radius-klein); background: var(--weiss);
}
.pi-zentrumbefund.warning { border-left-color: #b45309; }
.pi-zentrumbefund.critical { border-left-color: #b91c1c; }
.pi-zentrumbefund > div:first-child {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
.pi-zentrumbefund > div:first-child span { color: var(--text-leise); font-size: 14px; }
.pi-zentrumbefund p { margin: 7px 0 0; color: var(--text-leise); line-height: 1.45; }
.pi-wissensraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pi-wissensabschnitt {
  min-width: 0; align-self: start;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--weiss); overflow: hidden;
}
.pi-wissensabschnitt > summary {
  padding: 11px 13px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; cursor: pointer; font-weight: 600;
}
.pi-wissensabschnitt > summary b {
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; background: var(--flaeche); font-size: 13px;
}
.pi-wissensabschnitt > .beisatz { margin: 0; padding: 0 13px 10px; }
.pi-wissensliste { display: grid; gap: 7px; padding: 0 10px 10px; }
.pi-wissensliste article {
  min-width: 0; padding: 9px 10px; border-radius: var(--radius-klein); background: var(--flaeche);
}
.pi-wissensliste article > strong { display: block; overflow-wrap: anywhere; }
.pi-wissensliste ul { margin: 7px 0 0; padding: 0; display: grid; gap: 5px; list-style: none; }
.pi-wissensliste li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--text-leise); font-size: 14px;
}
.pi-wissensliste .aktionszeile { margin-top: 7px; }

/* =====================================================================
   Prüfbereiche in der Begleitspalte

   Zwei Aussagen je Zeile, die nie verschmelzen dürfen: der Prüfumfang
   (haben wir nachgesehen?) und das Prüfergebnis (was kam dabei heraus?).
   Ein ungeprüfter Bereich trägt deshalb eine gestrichelte Kante und einen
   grauen, ausdrücklich unbestimmten Ergebnistext - er darf nie aussehen
   wie ein geprüfter Bereich ohne Befund.

   Keine dieser Regeln wirkt innerhalb von .satz: Alle Wähler hängen an
   Bedienelementen des Begleiters und des Dialogs.
   ===================================================================== */

:root { --pi-warnton: #96632b; }
html[data-thema="dunkel"] { --pi-warnton: #d9b273; }
@media (prefers-color-scheme: dark) {
  html[data-thema="system"] { --pi-warnton: #d9b273; }
}

.pi-bereitschaft { display: grid; gap: 9px; margin: 0 0 16px; }
.pi-bereitschaftskopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 10px;
}
.pi-bereitschaftskopf h3 {
  margin: 0; min-width: 0;
  font-size: var(--grad-normal); font-weight: 600; line-height: 1.25;
}
.pi-pruefweite {
  min-width: 0; color: var(--text-leise);
  font-size: var(--grad-marke-ui); line-height: 1.35;
}
.pi-bereichsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.pi-bereichszeile {
  width: 100%; display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 2px 10px;
  padding: 8px 11px;
  border: 1px solid var(--rand);
  border-left: 3px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--weiss); color: var(--text); text-align: left;
}
.pi-bereichszeile:hover { border-color: var(--blau-rand); box-shadow: var(--schatten); }
.pi-bereichszeile:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.pi-bereichszeile[aria-pressed="true"] {
  background: var(--blau-flaeche); border-color: var(--blau-rand);
}
.pi-bereichsname {
  grid-column: 1; grid-row: 1; min-width: 0;
  font-size: var(--grad-neben); font-weight: 600; line-height: 1.3;
}
.pi-bereichszahl {
  grid-column: 2; grid-row: 1;
  min-width: 24px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--flaeche); color: var(--text-leise);
  font-size: var(--grad-marke-ui); font-weight: 600;
}
.pi-bereichsumfang {
  grid-column: 1; grid-row: 2; min-width: 0;
  color: var(--text-leise); font-size: var(--grad-marke-ui); line-height: 1.35;
}
.pi-bereichsergebnis {
  grid-column: 2; grid-row: 2;
  font-size: var(--grad-klein-ui); font-weight: 600; line-height: 1.35;
  white-space: nowrap;
}

/* Prüfumfang: gestrichelt heißt „hier wurde nicht nachgesehen“. */
.pi-bereichszeile[data-umfang="partial"],
.pi-bereitschaftskarte[data-umfang="partial"] { border-left-style: dotted; }
.pi-bereichszeile[data-umfang="not_checked"],
.pi-bereitschaftskarte[data-umfang="not_checked"] { border-left-style: dashed; }
.pi-bereichszeile[data-umfang="not_checked"] {
  background: color-mix(in srgb, var(--flaeche) 62%, var(--weiss));
}
.pi-bereichszeile[data-umfang="not_checked"] .pi-bereichsumfang {
  color: var(--text);
  border-bottom: 1px dashed var(--rand-stark);
}

/* Prüfergebnis: eigene Skala, unabhängig vom Umfang. */
.pi-bereichszeile[data-zustand="ready"] { border-left-color: var(--gruen); }
.pi-bereichszeile[data-zustand="ready"] .pi-bereichsergebnis { color: var(--gruen); }
.pi-bereichszeile[data-zustand="limited"] { border-left-color: var(--rand-stark); }
.pi-bereichszeile[data-zustand="limited"] .pi-bereichsergebnis { color: var(--text-leise); }
.pi-bereichszeile[data-zustand="notice"] { border-left-color: var(--blau); }
.pi-bereichszeile[data-zustand="notice"] .pi-bereichsergebnis { color: var(--blau-tief); }
.pi-bereichszeile[data-zustand="attention"] { border-left-color: var(--pi-warnton); }
.pi-bereichszeile[data-zustand="attention"] .pi-bereichsergebnis { color: var(--pi-warnton); }
.pi-bereichszeile[data-zustand="critical"] { border-left-color: var(--rot); }
.pi-bereichszeile[data-zustand="critical"] .pi-bereichsergebnis { color: var(--rot); }

.pi-bereitschaftsfuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.pi-filtermarke {
  min-width: 0; flex: 1 1 auto;
  color: var(--text-leise); font-size: var(--grad-marke-ui);
}
.pi-zentrumknopf { flex: 1 1 auto; justify-content: center; }
.pi-filterleer { padding: 2px 2px 6px; }

/* --------------------------------------------------- Prüfzentrum, Register */

.pi-bereitschaftskarte .pi-kartenfuss { font-size: var(--grad-marke-ui); }
.pi-bereitschaftskarte[data-zustand="limited"] { border-left-color: var(--rand-stark); }
.pi-bereitschaftskarte[data-zustand="limited"] .pi-kartenfuss { color: var(--text-leise); }
.pi-bereitschaftskarte[data-zustand="ready"] .pi-kartenfuss { color: var(--gruen); }
.pi-bereitschaftskarte[data-zustand="notice"] .pi-kartenfuss { color: var(--blau-tief); }
.pi-bereitschaftskarte[data-zustand="attention"] { border-left-color: var(--pi-warnton); }
.pi-bereitschaftskarte[data-zustand="attention"] .pi-kartenfuss { color: var(--pi-warnton); }
.pi-bereitschaftskarte[data-zustand="critical"] { border-left-color: var(--rot); }
.pi-bereitschaftskarte[data-zustand="critical"] .pi-kartenfuss { color: var(--rot); }
.pi-bereitschaftskarte:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

.pi-wissenseintrag { display: grid; gap: 5px; }
.pi-wissenskopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.pi-wissenskopf > strong { min-width: 0; overflow-wrap: anywhere; }
.pi-wissenszahl {
  flex: none; min-width: 26px; height: 21px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--weiss); color: var(--text-leise);
  font-size: var(--grad-marke-ui); font-weight: 600;
}
.pi-wissenseintrag .beisatz { margin: 0; font-size: var(--grad-klein-ui); }
.pi-fundstellen { margin: 2px 0 0; padding: 0; display: grid; gap: 4px; list-style: none; }
.pi-wissensfundstelle {
  width: 100%; padding: 6px 9px; text-align: left;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--weiss); color: var(--blau-tief);
  font-size: var(--grad-klein-ui); line-height: 1.35;
}
.pi-wissensfundstelle:hover {
  border-color: var(--blau-rand); background: var(--blau-flaeche); color: var(--text);
}
.pi-wissensfundstelle:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.pi-fundstellenrest, .pi-registerleer {
  margin: 0; padding: 2px 0 0; color: var(--text-leise); font-size: var(--grad-klein-ui);
}
.pi-registerleer { padding: 0 13px 12px; }
.pi-wissensbefund {
  margin: 2px 0 0; padding-left: 9px;
  border-left: 2px solid var(--rand-stark);
  color: var(--text-leise); font-size: var(--grad-klein-ui); line-height: 1.4;
}
.pi-wissensbefund.warning { border-left-color: var(--pi-warnton); }
.pi-wissensbefund.critical { border-left-color: var(--rot); }
.pi-ursprungserklaerung { margin: 0; }
.pi-ursprungsnotiz { margin: 0; }
.pi-ursprungsdialog .feldgruppe .beisatz { margin: 0 0 6px; }
.pi-ursprungsdialog select { width: 100%; }
.pi-ursprungsdialog textarea { width: 100%; }

@media (max-width: 900px) {
  .pi-bereitschaftskarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-wissensraster { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .coverbilddarstellung label { grid-template-columns: 1fr auto; }
  .coverbilddarstellung label > span { grid-column: 1 / -1; }
  .pi-bereitschaftskarten { grid-template-columns: 1fr; }
  .pi-bereitschaftskarte { min-height: 0; }
  .pi-pruefzentrum-intro { padding: 12px 13px; }
  .pi-pruefzentrum-intro p { font-size: 16px; line-height: 1.42; }
  .pi-ursprungskopf { display: grid; }
  .pi-ursprungskopf .knopf { width: 100%; justify-content: center; }
  .pi-ursprungskarten { grid-template-columns: 1fr; }
  .pi-zentrumbefund > div:first-child { align-items: flex-start; }
  .pi-bereitschaftskopf { gap: 2px; }
  .pi-bereichsergebnis { white-space: normal; }
}
@media (max-width: 360px) {
  .pi-bereichsumfang { grid-column: 1 / -1; grid-row: 2; }
  .pi-bereichsergebnis { grid-column: 1 / -1; grid-row: 3; white-space: normal; }
}

/* Die warmen Warnkarten verwenden im Dunkelmodus die Themenfarben und
   behalten damit denselben hohen Kontrast wie der restliche Haupttext. */
html[data-thema="dunkel"] .befund.publikationswarnung.critical,
html[data-thema="dunkel"] .befund.publikationswarnung.warning,
html[data-thema="dunkel"] .befund.publikationswarnung.info {
  background: color-mix(in srgb, var(--weiss) 88%, var(--blau) 12%);
}
@media (prefers-color-scheme: dark) {
  html[data-thema="system"] .befund.publikationswarnung.critical,
  html[data-thema="system"] .befund.publikationswarnung.warning,
  html[data-thema="system"] .befund.publikationswarnung.info {
    background: color-mix(in srgb, var(--weiss) 88%, var(--blau) 12%);
  }
}

/* =====================================================================
   Oberflächen- und Responsivsystem 2026

   Open Sans gehört ausschließlich zur Bedienoberfläche. Alles innerhalb
   von .satz behält seine ausgabegleiche Hausschrift aus satz.css.
   ===================================================================== */

:root {
  --grad-gross: 25px;
  --grad-mittel: 20px;
  --grad-normal: 16px;
  --grad-neben: 14.5px;
  --grad-klein-ui: 13px;
  --grad-marke-ui: 12.5px;
}

h1, h2, h3,
.wortmarke, .markentext, .kennmarke,
.seitenkopf h2, .begleiterkopf,
.dialog > header h2, .landingtitel {
  font-family: var(--schrift-anzeige);
}

/* Die gesetzte Seite ist ein eigenes typografisches System. Diese Regel ist
   absichtlich stärker als die Oberflächenregel und schützt auch H1 bis H3. */
.satz, .satz h1, .satz h2, .satz h3, .satz button, .satz input {
  font-family: var(--lesetext);
}
.satz .symbol, .satz .coversymbol, .satz .schrift-grotesk,
.satz .schrift-arial, .satz .schrift-opensans {
  font-family: var(--groteske);
}

.knopf, .werkzeug, .dokumenttitel,
input, textarea, select, button { letter-spacing: 0; }
.beisatz, .leiseinfo, .angaben { line-height: 1.52; }
.gruppentitel, .bereichskopf, .vorlagengruppe > .titel {
  line-height: 1.35; letter-spacing: .095em;
}

/* Cover: vollständiger Fokusrahmen, direkt erreichbare Farbe und Zeichen.
   Die Werkzeuge leben nur im Editor und werden nie exportiert. */
.blatt .covertext:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px #6ea8ff, inset 0 0 0 4px rgba(255,255,255,.72);
  background: rgba(255,255,255,.1);
}
.blatt .coverelement:focus-within {
  overflow: visible;
  z-index: 16;
}
.coverelementwerkzeuge {
  top: 3px; right: 3px;
  gap: 3px;
}
.coverelementwerkzeuge > button {
  width: 25px; height: 25px;
  border-color: rgba(255,255,255,.74);
  border-radius: 7px;
  backdrop-filter: blur(5px);
}
.coverelementwerkzeuge > button:focus-visible {
  outline-color: #fff;
  outline-offset: 1px;
}
.coversymbolknopf svg { width: 15px; height: 15px; }
.coverfarbpopover {
  top: 30px; right: 0; width: 204px;
  font-family: var(--schrift);
}
.coverfarbpopover strong { font-family: var(--schrift); font-size: 14px; }

/* Das störende Menü am unteren Coverrand entfällt. Bildausschnitt,
   Vergrößerung und Helligkeit werden gesammelt im Bilddialog gesteuert. */
.blatt .covermotiv > .bildwerkzeuge { display: none !important; }
.blatt .covermotiv.standardbild::after { display: none; }
.coverbilddarstellung {
  display: grid; gap: 11px;
}
.coverbilddarstellung label {
  min-height: 40px;
  grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr) 58px;
}
.coverbilddarstellung input[type="range"] { width: 100%; accent-color: var(--blau); }
.coverbilddarstellung label strong {
  text-align: right; font-variant-numeric: tabular-nums;
}
.coverdarstellung-reset { justify-self: end; margin-top: 3px; }

/* ----------------------------------------------------- seitliche Bereiche */

.panel-schliessen {
  width: 36px; height: 36px; padding: 0;
  place-items: center; flex: none;
  border: 1px solid var(--rand); border-radius: 9px;
  background: var(--weiss); color: var(--text-leise);
}
.panel-schliessen:hover { color: var(--text); background: var(--flaeche); }
.panel-schliessen svg { width: 17px; height: 17px; }
.seitenpanel-schliessen, .begleiter-schliessen,
.responsive-begleiterknopf { display: none; }
.begleiter-schliessen {
  position: sticky; top: 8px; margin: 8px 10px -44px auto; z-index: 5;
}

.panelhintergrund {
  position: fixed; inset: 0; z-index: 70;
  border: 0; padding: 0; background: rgba(20,17,13,.46);
  backdrop-filter: blur(1px);
}

@media (max-width: 1180px) {
  .app[data-ansicht="editor"] {
    grid-template-columns: var(--leiste-breite) 296px minmax(0, 1fr);
    grid-template-rows: 64px minmax(0, 1fr);
    grid-template-areas:
      "werkzeugleiste blattkopf    kopfzeile"
      "werkzeugleiste seitenleiste arbeitsflaeche";
  }
  .responsive-begleiterknopf { display: inline-grid; }
  .begleiter {
    display: flex;
    position: fixed; z-index: 72;
    top: 0; right: 0; bottom: 0;
    width: min(390px, calc(100vw - 72px));
    border-left: 1px solid var(--rand-stark);
    box-shadow: -12px 0 34px rgba(17,24,39,.22);
    transform: translateX(calc(100% + 18px));
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  html[data-begleiterpanel="offen"] .begleiter {
    transform: translateX(0); visibility: visible;
    transition: transform .2s ease;
  }
  .begleiter-schliessen {
    display: grid;
    position: absolute; top: 10px; right: 10px; margin: 0;
  }
  .begleiter > .begleitergruppe:first-of-type { padding-top: 22px; }
  .begleiter .pi-seitenkopf {
    grid-template-columns: 38px minmax(0, 1fr);
    padding-right: 48px;
  }
  .begleiter .pi-infoknopf { display: none; }
}

@media (max-width: 900px) and (min-width: 761px) {
  :root { --leiste-breite: 72px !important; }
  .app[data-ansicht="editor"] {
    grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
    grid-template-areas:
      "werkzeugleiste kopfzeile"
      "werkzeugleiste arbeitsflaeche";
  }
  .leiste .markentext, .leiste .werkzeugname { display: none !important; }
  .leistenkopf { flex-direction: column !important; }
  .werkzeug { justify-content: center !important; padding: 0 !important; }
  .seitenkopf, .seitenleiste {
    display: flex;
    position: fixed; left: var(--leiste-breite); z-index: 72;
    width: min(360px, calc(100vw - var(--leiste-breite) - 20px));
    transform: translateX(calc(-100% - var(--leiste-breite) - 18px));
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .seitenkopf {
    top: 0; height: 64px; border-bottom: 1px solid var(--rand);
    box-shadow: 12px 0 34px rgba(17,24,39,.16);
  }
  .seitenleiste {
    top: 64px; bottom: 0; height: auto; max-height: none;
    flex-direction: column; overflow-y: auto; border-bottom: 0;
    box-shadow: 12px 16px 34px rgba(17,24,39,.16);
  }
  html[data-seitenpanel="offen"] .seitenkopf,
  html[data-seitenpanel="offen"] .seitenleiste {
    transform: translateX(0); visibility: visible;
    transition: transform .2s ease;
  }
  .seitenpanel-schliessen { display: grid; margin-left: 0; }
  .seitenkopf .hinweisknopf { margin-left: auto; }
}

@media (max-width: 760px) {
  :root { --leiste-breite: 0px !important; }
  .app, .app[data-ansicht="start"], .app[data-ansicht="editor"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr) 58px;
    grid-template-areas:
      "kopfzeile"
      "arbeitsflaeche"
      "werkzeugleiste";
    width: 100%; min-width: 0; height: 100dvh;
  }
  .kopfzeile { grid-area: kopfzeile; min-width: 0; padding: 0 8px; }
  .werkbank { grid-area: arbeitsflaeche; min-width: 0; }
  .leiste {
    grid-area: werkzeugleiste;
    position: relative; inset: auto; z-index: 40;
    width: 100%; height: 58px;
    border-top: 1px solid var(--rand); border-bottom: 0;
    overflow-x: auto; overflow-y: hidden;
    justify-content: center;
  }
  .projektwerkzeuge { flex-direction: row; }
  .leiste .unten { margin: 0; flex-direction: row; }
  .arbeitsflaeche { min-width: 0; padding: 0 10px 72px; }
  .blattbuehne { min-width: 0; width: 100%; }
  .blatt { max-width: 100%; }
  .seitenreiter { padding: 10px 0; }

  .seitenkopf, .seitenleiste {
    position: fixed; left: 0; z-index: 72;
    width: min(92vw, 380px);
    transform: translateX(calc(-100% - 18px));
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .app[data-ansicht="editor"] .seitenkopf { display: flex; top: 56px; height: 54px; }
  .app[data-ansicht="editor"] .seitenleiste {
    display: flex; top: 110px; bottom: 58px; height: auto; max-height: none;
    flex-direction: column; overflow-y: auto;
  }
  html[data-seitenpanel="offen"] .seitenkopf,
  html[data-seitenpanel="offen"] .seitenleiste {
    transform: translateX(0); visibility: visible;
    transition: transform .2s ease;
  }
  .seitenpanel-schliessen { display: grid; margin-left: 0; }
  .seitenkopf .hinweisknopf { margin-left: auto; }
  .begleiter {
    top: 56px; bottom: 58px;
    width: min(94vw, 410px);
  }
  .panelhintergrund { top: 56px; bottom: 58px; }

  .kopfzeile .rechts { min-width: 0; gap: 4px; }
  .app[data-ansicht="editor"] .kopfzeile .rechts .knopf {
    width: 36px; height: 36px; padding: 0;
  }
  .app:not([data-ansicht="editor"]) .kopfzeile .rechts .knopf {
    width: auto; height: 38px; padding: 8px 13px; white-space: nowrap;
  }
  .dokumenttitel { min-width: 56px; max-width: 130px; }
  #knopf-versionen,
  .kopfzeile .sicherungsstand { display: none; }
  .responsive-begleiterknopf { display: inline-grid; }
  .aufklapp .flaeche { position: fixed; right: 8px; top: 54px; }

  .coverbilddarstellung label { grid-template-columns: 1fr auto; }
  .coverbilddarstellung label > span { grid-column: 1 / -1; }
  .coverbilddarstellung input[type="range"] { min-width: 0; }
}

.einstellungsnavigation {
  scrollbar-width: none;
}

.einstellungsnavigation::-webkit-scrollbar {
  display: none;
}

@media (max-width: 520px) {
  .kopfzeile #knopf-vor, .kopfzeile #knopf-vorschau { display: none; }
  .kopfzeile .zurueckknopf { padding: 7px; }
  .dokumenttitel { max-width: 108px; }
  .vorlagengitter, .mediathek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dialoghuelle { padding: 8px; }
  .dialog { max-height: calc(100dvh - 16px); }
  .dialog > header, .dialog > footer { padding-inline: 14px; }
  .dialog > .inhalt { padding: 16px 14px; }
}

@media (max-width: 600px) {
  .einstellungslayout, .einstellungsbereich,
  .mediathekseite, .rechtstext, .startbereich {
    width: 100%; max-width: none; padding-inline: 0;
  }
  .einstellungsgruppe { padding: 18px 16px; }
  .einstellungszeile {
    flex-direction: column; align-items: stretch; gap: 11px;
  }
  .einstellungszeile .steuerung { width: 100%; }
  .einstellungszeile select { width: 100%; }
  .themawahl { flex-wrap: wrap; }
  .themakarte { flex: 1 1 82px; min-width: 0; }
  .einstellungsnavigation {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .einstellungsnavigation a { flex: none; }
}

/* =====================================================================
   PageSetter Interface System 2026

   Ruhige Flächen, großzügige Radien, feine Konturen und klare Hierarchien
   gelten für die Bedienoberfläche. Das gesetzte Blatt (.satz/.blatt) bleibt
   ein unabhängiges, ausgabegleiches Typografiesystem.
   ===================================================================== */

:root {
  --ui-radius-control: 11px;
  --ui-radius-card: 16px;
  --ui-radius-panel: 20px;
  --ui-border: color-mix(in srgb, var(--rand-stark) 72%, transparent);
  --ui-surface-soft: color-mix(in srgb, var(--weiss) 93%, var(--flaeche));
  --ui-shadow-card: 0 1px 1px color-mix(in srgb, #000 5%, transparent),
    0 12px 32px color-mix(in srgb, #000 7%, transparent);
  --radius: var(--ui-radius-card);
  --radius-klein: var(--ui-radius-control);
}

html, body {
  width: 100%; max-width: 100%; overflow-x: clip;
}

.app, .kopfzeile, .seitenkopf, .seitenleiste,
.werkbank, .arbeitsflaeche, .begleiter,
.kopfzeile > *, .kopfzeile .rechts,
.startbereich, .einstellungslayout, .mediathekseite,
.pi-admininhalt, .pi-adminkopf > * {
  min-width: 0;
}

.app {
  width: 100%; max-width: 100vw; height: 100dvh;
}
.app[data-ansicht="editor"] {
  grid-template-columns:
    var(--leiste-breite)
    clamp(272px, 18vw, 296px)
    minmax(0, 1fr)
    clamp(304px, 21vw, 348px);
}
.app[data-ansicht="start"] {
  grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
}
.kopfzeile .rechts {
  flex: 0 1 auto; max-width: 100%; overflow: visible;
}
.dokumenttitel { flex: 1 1 130px; }
.kopfzeile .rechts > *, .aufklapp { flex: none; }

@container kopf (max-width: 1260px) {
  .kopfzeile .rechts .knopf .beschriftung { display: none; }
  .kopfzeile .rechts .knopf { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .kopfzeile .rechts .aufklapp .knopf { width: 38px; }
}
@container kopf (max-width: 1080px) {
  .kopfzeile .sicherungsstand { display: none; }
}
@container kopf (max-width: 820px) {
  .kennmarke, .stiftmarke { display: none; }
  .dokumenttitel { max-width: 150px; }
}

@media (max-width: 1400px) and (min-width: 1181px) {
  .app[data-ansicht="editor"] {
    grid-template-columns: var(--leiste-breite) 280px minmax(0, 1fr) 300px;
  }
}

@media (max-width: 1260px) and (min-width: 761px) {
  :root { --leiste-breite: 72px !important; }
  .leiste .markentext, .leiste .werkzeugname { display: none !important; }
  .leistenkopf { flex-direction: column !important; }
  .werkzeug { justify-content: center !important; padding-inline: 0 !important; }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .app[data-ansicht="editor"] {
    grid-template-columns: var(--leiste-breite) 280px minmax(0, 1fr);
    grid-template-areas:
      "werkzeugleiste blattkopf    kopfzeile"
      "werkzeugleiste seitenleiste arbeitsflaeche";
  }
}

@media (max-width: 900px) and (min-width: 761px) {
  .app[data-ansicht="editor"] {
    grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
  }
}

/* Einheitliche, sanft erhöhte Oberflächen. Die Auswahl vermeidet bewusst
   .blatt, .satzspiegel und alle Elemente der späteren Ausgabe. */
.projektkarte, .leerbereich, .einstellungsgruppe,
.medienverwaltung, .rechtstext, .dialog,
.wartelistenkarte, .anmeldekarte,
.reviewzeile, .hinweiskasten {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface-soft);
  box-shadow: var(--ui-shadow-card);
}

.knopf, .zurueckknopf, .werkzeug,
.panel-schliessen, .hinweisknopf,
.aufklapp .flaeche button {
  border-radius: var(--ui-radius-control);
  transition: color .16s ease, background-color .16s ease,
    border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.knopf:not(:disabled):active,
.zurueckknopf:active { transform: scale(.98); }

select, textarea,
input[type=text]:not(.dokumenttitel), input[type=password],
input[type=search], input[type=number], input[type=email] {
  min-height: 42px; padding: 9px 12px;
  border-radius: var(--ui-radius-control);
}

.dialog {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-panel);
  box-shadow: 0 28px 80px color-mix(in srgb, #000 28%, transparent);
}
.dialog > header, .dialog > footer { background: color-mix(in srgb, var(--weiss) 96%, var(--flaeche)); }

.leiste, .seitenkopf, .seitenleiste, .kopfzeile, .begleiter {
  border-color: var(--ui-border);
  background: color-mix(in srgb, var(--weiss) 97%, var(--flaeche));
}

.pi-befund.publikationswarnung { cursor: default; }

@media (max-width: 760px) {
  .app, .app[data-ansicht="start"], .app[data-ansicht="editor"] {
    width: 100%; max-width: 100vw; height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr) 58px;
    grid-template-areas:
      "kopfzeile"
      "arbeitsflaeche"
      "werkzeugleiste";
  }
  .kopfzeile .rechts { flex: none; }
  .dokumenttitel { flex: 1 1 auto; min-width: 44px; }
  .begleiter { width: min(100%, 430px); }
  .seitenkopf, .seitenleiste { width: min(100%, 390px); }
}

/* =====================================================================
   Projektkopf und automatischer Seitenfluss · Sprint 2026-08-21

   Die Navigation ist ein eigener, fester Bereich über der scrollenden
   Seite. Projektidentität und Aktionen konkurrieren damit nicht länger um
   dieselbe Zeile. Diese Regeln stehen bewusst am Ende der Kaskade, weil sie
   mehrere historische Breakpoint-Stufen vereinheitlichen.
   ===================================================================== */

/* --------------------------------------------------------- Projektidentität */

.projektidentitaet {
  display: grid; place-items: center; flex: none; min-width: 0;
  padding: 4px 0 10px; margin-bottom: 2px;
  border-bottom: 1px solid var(--rand);
}
.projektidentitaet[hidden] { display: none; }
.projektidentitaet-kompakt {
  width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--rand); border-radius: var(--ui-radius-control);
  background: var(--weiss); color: var(--blau);
}
.projektidentitaet-kompakt:hover {
  border-color: var(--blau-rand); background: var(--blau-flaeche);
}
.projektidentitaet-kompakt svg { width: 19px; height: 19px; }
.projektidentitaet-inhalt { display: none; min-width: 0; width: 100%; gap: 4px; }
.projektidentitaet-titelzeile {
  display: grid; grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center; gap: 6px; min-width: 0;
}
.projektidentitaet .dokumenttitel {
  width: 100%; min-width: 0; height: 32px; padding: 3px 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 17px; line-height: 1.25;
}
.projektidentitaet .stiftmarke svg { width: 15px; height: 15px; }
.projektidentitaet-angaben {
  display: block; min-width: 0; padding: 0 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-leise); font-size: 12.5px; line-height: 1.45;
}
html[data-leiste="offen"] .projektidentitaet {
  place-items: stretch; padding: 6px 2px 12px;
}
html[data-leiste="offen"] .projektidentitaet-kompakt { display: none; }
html[data-leiste="offen"] .projektidentitaet-inhalt { display: grid; }

/* ------------------------------------------------------------- Kopfaktionen */

.kopfzeile { justify-content: space-between; }
.kopfzeile .rechts { margin-left: auto; }

/* Hauptaktion und Pfeil bilden wieder genau eine Split-Schaltfläche. Die
   globale Radiusregel darf die innere Trennkante nicht abrunden. */
.aufklapp { gap: 0; isolation: isolate; }
.aufklapp > .knopf:first-child {
  border-radius: var(--ui-radius-control) 0 0 var(--ui-radius-control);
}
.aufklapp > .pfeilknopf {
  flex: 0 0 35px; width: 35px; margin-left: -1px; padding-inline: 8px;
  justify-content: center;
  border-radius: 0 var(--ui-radius-control) var(--ui-radius-control) 0;
}
.aufklapp > .pfeilknopf svg { margin: 0; }
.speichergruppe > .pfeilknopf { border-left-color: var(--rand); }

@container kopf (min-width: 901px) {
  .kopfzeile .rechts .knopf .beschriftung { display: inline; }
  .kopfzeile .rechts .knopf {
    width: auto; height: 38px; padding: 8px 12px; justify-content: center;
  }
  .kopfzeile .rechts .aufklapp > .pfeilknopf { width: 35px; padding-inline: 8px; }
}
@container kopf (max-width: 900px) {
  .kopfzeile .rechts .knopf .beschriftung { display: none; }
  .kopfzeile .rechts .knopf {
    width: 38px; height: 38px; padding: 0; justify-content: center;
  }
  .kopfzeile .rechts .aufklapp > .pfeilknopf { width: 32px; flex-basis: 32px; }
}

/* ---------------------------------------------------------- Seitennavigation */

.seitensteuerung {
  container: seitennavi / inline-size;
  flex: none; min-width: 0; padding: 7px 28px;
  border-bottom: 1px solid var(--rand);
  background: var(--flaeche); box-shadow: 0 5px 16px rgba(17,24,39,.04);
}
.seitensteuerung[hidden] { display: none; }
.seitensteuerung .seitenreiter {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 7px;
  position: static; inset: auto; z-index: auto;
  min-width: 0; min-height: 36px; margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none;
}
.seitensteuerung .seitenlauf { padding: 1px 2px; }
.seitensteuerung .seitenreiterknopf {
  min-width: 32px; min-height: 32px; padding: 5px 10px;
  font-size: 14px; line-height: 1;
}
.seitensteuerung .seitenreiterknopf .nummer {
  display: block; font-size: 14px; line-height: 1; font-weight: 600;
}
.seitensteuerung .seitenreiterknopf .name {
  font-size: 13px; line-height: 1.15;
}
.seitensteuerung .seitenwerkzeuge { flex-wrap: nowrap; }
.seitensteuerung .seitenwerkzeuge button,
.seitensteuerung .zoomgruppe button {
  min-height: 32px; padding: 5px 10px; font-size: 13.5px; line-height: 1.15;
}
.seitensteuerung .zoomgruppe { margin-left: 0; flex: none; }
.seitensteuerung .zoomgruppe .stand { font-size: 13px; }
.arbeitsflaeche { padding-top: 18px; }

@container seitennavi (max-width: 820px) {
  .seitensteuerung .seitenreiter {
    display: grid;
    grid-template-columns: auto minmax(88px, 1fr) auto auto;
    gap: 6px;
  }
  .seitensteuerung .rollknopf.links { grid-column: 1; grid-row: 1; }
  .seitensteuerung .laufhuelle { grid-column: 2; grid-row: 1; min-width: 88px; }
  .seitensteuerung .rollknopf.rechts { grid-column: 3; grid-row: 1; }
  .seitensteuerung .zoomgruppe { grid-column: 4; grid-row: 1; }
  .seitensteuerung .seitenwerkzeuge {
    grid-column: 1 / -1; grid-row: 2; min-width: 0;
    overflow-x: auto; padding-bottom: 1px; scrollbar-width: none;
  }
  .seitensteuerung .seitenwerkzeuge::-webkit-scrollbar { display: none; }
}

@container seitennavi (max-width: 480px) {
  .seitensteuerung .seitenreiter {
    grid-template-columns: auto minmax(60px, 1fr) auto auto;
  }
  .seitensteuerung .zoomgruppe {
    grid-column: 4; grid-row: 1; justify-self: end;
  }
  .seitensteuerung .seitenwerkzeuge { grid-row: 2; }
  .seitensteuerung .zoomgruppe button:last-child { display: none; }
}

/* ---------------------------------------------------- Publication Intelligence */

@keyframes pi-sanft-pulsieren {
  0%, 72%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  84% { transform: scale(1.035); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gruen) 24%, transparent)); }
}
.pi-marke svg, .pi-zustandszeichen svg {
  transform-origin: center;
  animation: pi-sanft-pulsieren 5.4s ease-in-out infinite;
}
.einstellungsinformation {
  margin: 0; max-width: 420px; color: var(--text-leise);
  font-size: var(--grad-neben); line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .pi-marke svg, .pi-zustandszeichen svg { animation: none; }
}

@media (max-width: 1260px) and (min-width: 761px) {
  .projektidentitaet-inhalt { display: none !important; }
  .projektidentitaet-kompakt { display: grid !important; }
  .seitensteuerung { padding-inline: 18px; }
}

@media (max-width: 760px) {
  .app, .app[data-ansicht="start"], .app[data-ansicht="editor"] {
    width: 100%; max-width: 100vw; height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr) 58px;
    grid-template-areas:
      "kopfzeile"
      "arbeitsflaeche"
      "werkzeugleiste";
  }
  .projektidentitaet { display: none; }
  .begleiter { width: min(100%, 430px); }
  .seitenkopf, .seitenleiste { width: min(100%, 390px); }
  .seitensteuerung { padding: 6px 10px; }
  .arbeitsflaeche { padding-top: 12px; }
  .kopfzeile .rechts { gap: 3px; }
  .app[data-ansicht="editor"] .kopfzeile .rechts .aufklapp > .pfeilknopf {
    width: 30px; flex-basis: 30px;
  }
}

/* Ein Eingriff eines Verwalters in ein fremdes Konto - sichtbar, bis das
   Konto ihn selbst zur Kenntnis nimmt. */
.eingriffskasten {
  border: 1px solid var(--warnung, #a81f63);
  border-left-width: 3px;
  border-radius: var(--radius-klein, 6px);
  padding: 12px 14px;
  margin: 10px 0 4px;
}
.eingriffstitel { margin: 0 0 6px; font-weight: 600; }
.eingriffsliste { margin: 0 0 8px; padding-left: 18px; }
.eingriffsliste li { margin: 2px 0; }
.eingriffsknoepfe { margin-top: 10px; }

/* Eine Wahl mit mehr als zwei Ausgaengen: jede Moeglichkeit ein Knopf,
   jede mit ihrer eigenen Zeile Erklaerung. */
.wahlliste { display: grid; gap: 8px; margin-top: 12px; }
.wahlzeile {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein, 6px);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.wahlzeile:hover { border-color: var(--akzent); }
.wahlzeile:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.wahlzeile.empfohlen { border-color: var(--akzent); }
.wahlname { display: block; font-weight: 600; }
.wahlbeisatz { display: block; margin-top: 2px; font-size: 0.85rem; opacity: 0.8; }

/* Eine Nebenentscheidung im Dialog - sie steht unter der Hauptaussage und
   ist nie vorangekreuzt: Was zusaetzlich geloescht wird, waehlt ein Mensch. */
.dialoghaken {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 0;
  cursor: pointer;
}
.dialoghaken input { margin-top: 3px; flex: 0 0 auto; }