/* Mneo · gemeinsame Gestaltung für Werkbank, Showroom und Apps */
/* Stil und Modus setzt /ui/app.js als <html data-stil="aurora|praezision|freundlich|labor|werkstatt|science|standard" data-modus="hell|dunkel">
   (gewählt je Werkbank: mneo.json → "darstellung", ⚙ → Darstellung oder /einrichten; Standard „aurora“, dunkel).
   Apps verwenden nur diese Variablen — dann folgen sie automatisch dem gewählten Layout. --akzent-text = Schrift auf --akzent. */
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: normal; font-display: swap; src: url("/ui/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: italic; font-display: swap; src: url("/ui/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-style: normal; font-display: swap; src: url("/ui/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/ui/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/ui/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/ui/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/ui/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
/* Präzision (Inter), Freundlich (Plus Jakarta Sans), Labor (Space Grotesk, JetBrains Mono) — variabel, fonts/README.md */
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("/ui/fonts/inter-variable.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("/ui/fonts/plus-jakarta-sans-variable.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-style: normal; font-display: swap; src: url("/ui/fonts/space-grotesk-variable.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; font-style: normal; font-display: swap; src: url("/ui/fonts/jetbrains-mono-variable.woff2") format("woff2"); }

/* Werkstatt · hell (Standardwert) */
:root {
  --bg: #f6f4ef;
  --flaeche: #ffffff;
  --tinte: #1d1f1e;
  --leise: #6b6f6c;
  --linie: #e2ded5;
  --akzent: #2f6f5e;
  --akzent-hell: #e3efe9;
  --akzent-text: var(--flaeche);   /* ältere Stile: Fläche auf Akzent */
  --kante: #c9c4b8;
  --hover: rgba(127,127,127,.12);
  --warn: #9a5b13;
  --radius: 12px;
  --rund: 999px;
  --schatten: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04);
  --serif: "Iowan Old Style", "Charter", "Georgia", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  color-scheme: light;
}
/* Werkstatt · dunkel */
:root[data-stil="werkstatt"][data-modus="dunkel"] {
  --bg: #1b1e20; --flaeche: #24282c; --tinte: #ede8df; --leise: #9aa1a7; --linie: #353b40;
  --akzent: #ff8a3d; --akzent-hell: #3a2b20; --warn: #f2c230; --schatten: none; color-scheme: dark;
}
/* Science · hell: Fachzeitschrift — kühles Papier, Tinte, Karminrot */
:root[data-stil="science"] {
  --bg: #f5f6f4; --flaeche: #ffffff; --tinte: #15202b; --leise: #56616b; --linie: #d3d8dc;
  --akzent: #8c1d2f; --akzent-hell: #f4e6e8; --warn: #8a5a00; --radius: 3px; --rund: 2px;
  --schatten: 0 1px 0 rgba(21,32,43,.06);
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
/* Science · dunkel: Schiefer */
:root[data-stil="science"][data-modus="dunkel"] {
  --bg: #11161b; --flaeche: #171e25; --tinte: #e2e6ea; --leise: #8e9aa5; --linie: #2a333c;
  --akzent: #e07a87; --akzent-hell: #35222a; --warn: #e0b45c; --schatten: none; color-scheme: dark;
}
/* Standard · hell: ruhig, blau, eckiger */
:root[data-stil="standard"] {
  --bg: #f2f5f9; --flaeche: #ffffff; --tinte: #14212f; --leise: #5a6878; --linie: #d8e0ea;
  --akzent: #1f5fbf; --akzent-hell: #e6eefa; --warn: #a15c00; --radius: 4px; --rund: 3px;
  --schatten: 0 1px 2px rgba(16,40,80,.08);
  --serif: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: light;
}
/* Standard · dunkel: Nachtblau */
:root[data-stil="standard"][data-modus="dunkel"] {
  --bg: #0e1622; --flaeche: #152132; --tinte: #e3eaf3; --leise: #8b9bb0; --linie: #243349;
  --akzent: #6ea8ff; --akzent-hell: #1a2c47; --warn: #e6a24c; --schatten: none; color-scheme: dark;
}
/* ---- Seit v2.05: drei neue Stile (Entwürfe A · B · C aus der Card „Design-Inventur“) -------------------------------- */
/* Präzision · hell (A, Standard für neue Werkbänke): ruhig, Haarlinien, Petrol — Vorbild Linear/Vercel */
:root[data-stil="praezision"] {
  --bg: #fbfbfc; --flaeche: #ffffff; --tinte: #111316; --leise: #5b616a; --linie: #e6e8eb; --kante: #d5d8dd; --hover: #f0f2f4;
  --akzent: #0e7490; --akzent-hell: #e3f0f3; --akzent-text: #ffffff; --warn: #a15c07; --radius: 8px; --rund: 6px;
  --schatten: none;
  --serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  color-scheme: light;
}
:root[data-stil="praezision"][data-modus="dunkel"] {
  --bg: #0c0e11; --flaeche: #13161a; --tinte: #e8eaed; --leise: #a0a7b1; --linie: #22272e; --kante: #323840; --hover: #1a1f25;
  --akzent: #22b8cf; --akzent-hell: #12292f; --akzent-text: #04161a; --warn: #e0a84a; color-scheme: dark;
}
/* Freundlich · hell (B): weich, rund, Violett und Pastell */
:root[data-stil="freundlich"] {
  --bg: #f5f4fb; --flaeche: #ffffff; --tinte: #1d1a38; --leise: #5e5a7c; --linie: #e7e4f3; --kante: #d6d2ea; --hover: #f1effb;
  --akzent: #5b4ff5; --akzent-hell: #ebe9ff; --akzent-text: #ffffff; --warn: #b4540a; --radius: 16px; --rund: 999px;
  --schatten: 0 1px 2px rgba(29,26,56,.05), 0 4px 14px rgba(29,26,56,.06);
  --serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  color-scheme: light;
}
:root[data-stil="freundlich"][data-modus="dunkel"] {
  --bg: #13111d; --flaeche: #1c1a2a; --tinte: #eeedf8; --leise: #aaa6c6; --linie: #2b283e; --kante: #3a3653; --hover: #24213a;
  --akzent: #8f86ff; --akzent-hell: #2a2652; --akzent-text: #120f26; --warn: #f0b45a;
  --schatten: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25); color-scheme: dark;
}
/* ---- Seit v2.32: Aurora (Standard für neue Werkbänke) — das Gewand der Webseite: Nachtviolett, Verlauf, Leuchten ---- */
:root[data-stil="aurora"] {
  --bg: #f6f5fd; --flaeche: #ffffff; --tinte: #1a1730; --leise: #5e5a7c; --linie: #e6e3f4; --kante: #d4cfeb; --hover: #efedfb;
  --akzent: #5b4ff5; --akzent-hell: #ebe9ff; --akzent-text: #ffffff; --warn: #b4540a; --radius: 16px; --rund: 999px;
  --verlauf: linear-gradient(135deg, #8f86ff 0%, #5b4ff5 100%); --rosa: #f472b6;
  --leuchten: 0 8px 26px -8px rgba(91,79,245,.45);
  --schatten: 0 1px 2px rgba(26,23,48,.05), 0 6px 18px rgba(26,23,48,.07);
  --serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  color-scheme: light;
}
:root[data-stil="aurora"][data-modus="dunkel"] {
  --bg: #0d0b16; --flaeche: #1c1a2a; --tinte: #eeedf8; --leise: #aaa6c6; --linie: #2b283e; --kante: #3a3653; --hover: #24213a;
  --akzent: #8f86ff; --akzent-hell: #2a2652; --akzent-text: #ffffff; --warn: #f0b45a;
  --leuchten: 0 8px 28px -6px rgba(143,134,255,.55);
  --schatten: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.3); color-scheme: dark;
}
/* Labor · hell (C): technisch, Raster, eckig, Signal-Orange, Monospace-Etiketten */
:root[data-stil="labor"] {
  --bg: #efefec; --flaeche: #f8f8f6; --tinte: #121212; --leise: #4c4c49; --linie: #cfcfca; --kante: #1b1b1a; --hover: #e3e3de;
  --akzent: #ff5a1f; --akzent-hell: #f9dccf; --akzent-text: #121212; --warn: #a34f00; --radius: 2px; --rund: 2px;
  --schatten: none; --raster: rgba(18,18,18,.055);
  --serif: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: light;
}
:root[data-stil="labor"][data-modus="dunkel"] {
  --bg: #161718; --flaeche: #1c1e1f; --tinte: #ecece7; --leise: #a9a9a3; --linie: #303336; --kante: #e8e8e3; --hover: #24272a;
  --akzent: #ff6a2b; --akzent-hell: #3a2519; --akzent-text: #121212; --warn: #f0b45a; --raster: rgba(236,236,231,.045);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--tinte); font: 15px/1.55 var(--sans); }
a { color: var(--akzent); }

.kopf { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap;
  padding: 22px clamp(16px, 4vw, 48px) 14px; border-bottom: 1px solid var(--linie); }
.marke { font: 600 22px/1 var(--serif); letter-spacing: .01em; }
.marke span { color: var(--leise); font-weight: 400; }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; color: var(--leise); padding: 6px 12px; border-radius: var(--rund); }
.nav a[aria-current] { color: var(--tinte); background: var(--akzent-hell); }
.projekt { margin-left: auto; color: var(--leise); font-size: 13px; }
.kopf-ich { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px 3px 3px;
  border: 0; border-radius: var(--rund); background: none; color: inherit; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.kopf-ich:hover { background: rgba(127,127,127,.15); }
.kopf-ich:focus-visible { background: rgba(127,127,127,.15); outline: 2px solid currentColor; outline-offset: 2px; }
.kopf-ich + .projekt { margin-left: 0; }
.kopf-ich .ich-org { opacity: .7; font-size: .92em; }
dialog.wer { width: min(560px, 92vw); }
dialog.wer input[type=text], dialog.wer select { display: block; width: 100%; margin-top: 6px; font: inherit; color: inherit; background: rgba(127,127,127,.12);
  border: 1px solid var(--linie); border-radius: 8px; padding: 7px 10px; }
dialog.wer details { margin: 4px 0 12px; font-size: 14px; } dialog.wer details summary { cursor: pointer; color: var(--leise); }
dialog.wer .org-teil { margin: 10px 0; } dialog.wer .org-teil p { margin: 4px 0; color: var(--leise); font-size: 13px; }
dialog.wer select option { color: initial; }
dialog.wer .gesperrt { padding: 8px 10px; border-radius: 8px; background: rgba(127,127,127,.12); font-size: 14px; }
dialog.wer label.schalter { display: flex; margin: 16px 0 2px; font-size: 14px; color: inherit; }   /* Persönliches Profil verwenden */
.kopf-ich + .projekt::before { content: "· "; }
.ich-kreis { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--leise);
  color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1; }
.kopf-ich.leise { font-weight: 400; opacity: .75; }
.kopf-ich[hidden] { display: none; }

main { padding: 28px clamp(16px, 4vw, 48px) 64px; max-width: 1240px; }
h1 { font: 600 28px/1.2 var(--serif); margin: 0 0 6px; }
.unterzeile { color: var(--leise); margin: 0 0 28px; }
h2.abschnitt { font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em;
  color: var(--leise); margin: 36px 0 14px; }

.card { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { font: 600 17px/1.3 var(--sans); margin: 0; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { margin: 0; color: var(--leise); flex: 1; }
.chip { font: 600 11px/1 var(--sans); letter-spacing: .04em; padding: 4px 8px; border-radius: var(--rund);
  background: var(--akzent-hell); color: var(--akzent); }
.chip.lokal { background: transparent; border: 1px solid var(--linie); color: var(--leise); }
.fuss { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--linie); padding-top: 12px; }
.knopf { font: 500 13px/1 var(--sans); padding: 8px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--linie); background: transparent; color: var(--tinte); text-decoration: none; }
.knopf:hover { border-color: var(--leise); }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.knopf.klein { padding: 6px 8px; font-size: 12px; color: var(--leise); }
.knopf.klein.haupt { color: var(--akzent-text); }   /* klein darf die Schrift des Hauptknopfs nicht abdunkeln */

.schalter { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--leise); cursor: pointer; }
.schalter input { appearance: none; width: 34px; height: 20px; border-radius: 999px; background: var(--linie);
  position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.schalter input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--flaeche); transition: transform .15s; }
.schalter input:checked { background: var(--akzent); }
.schalter input:checked::after { transform: translateX(14px); }
.schalter input:disabled { opacity: .4; cursor: not-allowed; }

.leer { border: 1px dashed var(--linie); border-radius: var(--radius); padding: 24px; color: var(--leise); }
.leer code, .prosa code { font-family: var(--mono); font-size: .92em; background: var(--akzent-hell);
  padding: 1px 5px; border-radius: 4px; }
details.archiv summary { cursor: pointer; color: var(--leise); margin: 36px 0 14px; }
.hinweis { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--tinte);
  color: var(--bg); padding: 10px 16px; border-radius: 8px; font-size: 14px; opacity: 0; transition: opacity .2s;
  pointer-events: none; max-width: calc(100% - 32px); }
.hinweis.an { opacity: 1; }

/* Markdown */
.prosa { max-width: 760px; }
.prosa h1 { font-size: 26px; } .prosa h2 { font: 600 20px/1.3 var(--serif); margin: 28px 0 8px; }
.prosa h3 { font-size: 16px; margin: 20px 0 6px; }
.prosa table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 12px 0; display: block; overflow-x: auto; }
.prosa th, .prosa td { border: 1px solid var(--linie); padding: 6px 10px; text-align: left; vertical-align: top; }
.prosa th { background: var(--akzent-hell); }
.prosa pre { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 12px;
  overflow-x: auto; font: 13px/1.5 var(--mono); }
.prosa pre code { background: none; padding: 0; }
.prosa blockquote { margin: 12px 0; padding: 4px 14px; border-left: 3px solid var(--akzent); color: var(--leise); }

/* Eingebettet in die Werkbank: eigener Kopf der App entfällt */
.eingebettet .kopf { display: none; }

/* Werkbank: Spalte links, gewählte App rechts */
body.werkbank { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.bank { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; }
iframe.buehne { width: 100%; height: 100%; border: 0; background: var(--bg); min-width: 0; }
.chip.weg { background: transparent; border: 1px solid var(--warn); color: var(--warn); }
.leise { color: var(--leise); }

.spalte { border-right: 1px solid var(--linie); overflow-y: auto; padding: 8px 14px 24px; background: var(--bg); }
.spalte h2.abschnitt { margin: 22px 4px 8px; }
.spalte h2.abschnitt span { font-weight: 400; }
.mini, #kern { display: flex; flex-direction: column; gap: 6px; }
#kern { margin-top: 8px; }
.minicard { cursor: pointer; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; padding: 8px 10px 9px; display: flex; flex-direction: column; gap: 3px; }
.minicard:hover { border-color: var(--leise); }
.minicard:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.minicard.aktiv { border-color: var(--akzent); box-shadow: inset 3px 0 0 var(--akzent); }
.minicard.weg strong { color: var(--leise); text-decoration: line-through; text-decoration-color: var(--linie); }
.minicard .zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.minicard strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minicard .rechts { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.minicard small { color: var(--leise); font-size: 12px; line-height: 1.35; padding-left: 16px; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.minicard small.karten-zeile { color: var(--tinte); font-weight: 600; -webkit-line-clamp: 1; }   /* Art · bei wem · Status */
.minicard .chip { font-size: 10px; padding: 2px 6px; flex: none; }
/* Marker „im Showroom“: die Card bleibt in ihrem Labor, gut sichtbar als Etikett + Band oben (nur Variablen des Themas) */
.minicard .chip.showroom-marke { background: var(--akzent); color: var(--akzent-text); letter-spacing: .02em; }
.minicard.im-showroom { border-top: 3px solid var(--akzent); }
dialog label.zeile-wahl { display: flex; align-items: center; gap: 8px; }
.symbol { border: 0; background: none; color: var(--leise); font-size: 15px; line-height: 1; cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px; }
.symbol:hover { background: var(--akzent-hell); color: var(--tinte); }
.punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--leise); }
.punkt.labor { background: var(--warn); }
.punkt.showroom { background: var(--akzent); }
.punkt.verworfen { background: transparent; border: 1px solid var(--leise); }
.punkt.kern { background: var(--tinte); border-radius: 2px; }
.leer.klein { padding: 8px 12px; font-size: 13px; }
.tipp { font-size: 12px; color: var(--leise); margin: 24px 4px 0; }

@media (max-width: 860px) {
  body.werkbank { height: auto; overflow: visible; }
  .bank { display: flex; flex-direction: column; }
  .spalte { border-right: 0; border-bottom: 1px solid var(--linie); max-height: 40vh; }
  iframe.buehne { height: 75vh; }
}

/* Cards: Schalter unten, Ziehen zwischen Bereichen */
.minicard[draggable="true"] { cursor: grab; }
.minicard.zieht { opacity: .45; }
.ablage { border-radius: 12px; padding: 0 4px 6px; margin: 0 -4px; transition: background .12s, outline-color .12s; outline: 2px dashed transparent; outline-offset: -2px; }
.ablage.ueber { background: var(--akzent-hell); outline-color: var(--akzent); }
.ablage[data-ort="verworfen"].ueber { outline-color: var(--warn); }

/* Menüs im Kopf (Layout, Sprache) */
.menue { position: relative; }
.menue summary { list-style: none; cursor: pointer; color: var(--leise); padding: 6px 12px; border-radius: var(--rund); }
.menue summary::-webkit-details-marker { display: none; }
.menue summary::after { content: " ▾"; font-size: 11px; }
.menue[open] summary { background: var(--akzent-hell); color: var(--tinte); }
.menue-inhalt { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 320px; max-height: 70vh; overflow-y: auto;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 6px; }
.menue-titel { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); padding: 12px 10px 6px; }

dialog { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: var(--tinte);
  padding: 22px; width: min(480px, calc(100% - 32px)); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog h3 { margin: 0 0 14px; font: 600 18px/1.3 var(--serif); }
dialog label { display: block; font-size: 14px; margin-bottom: 12px; }
dialog textarea { display: block; width: 100%; margin-top: 6px; font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; resize: vertical; }
dialog .aktionen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.pflicht { font-size: 11px; color: var(--warn); margin-left: 4px; }

/* KI in der Werkbank */
.ki-knopf { margin-left: 8px; }
.ki-wahl { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0 4px; border-radius: 4px; }
.ki-wahl::after { content: " ▾"; opacity: .6; }
.ki-wahl:hover { text-decoration: underline; }
.ki-kopf { position: relative; }
.ki-menue { position: absolute; top: 100%; left: 40px; z-index: 20; min-width: 260px; padding: 4px; border-radius: 8px;
  background: var(--flaeche, #1b1e1d); color: inherit; border: 1px solid var(--linie, rgba(127,127,127,.4)); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.ki-menue button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ki-menue button:hover:not(:disabled) { background: rgba(127,127,127,.15); }
.ki-menue button:disabled { opacity: .5; cursor: default; }
.ki-menue small { opacity: .7; }
/* Auftritt einer Card (Showroom-Text, Titelbild) */
dialog.auftritt { width: min(640px, 92vw); }
.auftritt-bild { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; }
.auftritt-bild img { width: 220px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; border: 1px solid var(--linie); }
.auftritt-bild .leer { width: 220px; aspect-ratio: 16 / 10; display: grid; place-items: center; }
.auftritt-knoepfe { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.auftritt-knoepfe label.knopf { cursor: pointer; }
.titelbild { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; margin: 0 0 8px; }
.mehr-text { margin-top: 6px; font-size: 13px; }
.mehr-text summary { cursor: pointer; color: var(--leise); }
.mehr-text .md { margin-top: 6px; }
.mehr-text .md :is(h1, h2, h3, h4) { font: 600 14px/1.3 var(--sans) !important; margin: 8px 0 4px !important; letter-spacing: 0 !important; }   /* nicht die Kachel-Überschrift erben */
/* ⋯-Menü einer Card */
.card-menue { position: fixed; z-index: 50; min-width: 220px; max-height: 70vh; overflow-y: auto; padding: 4px; border-radius: 8px;
  background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie); box-shadow: 0 6px 20px rgba(0,0,0,.18); font-size: 13.5px; }
.card-menue button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px 6px 6px; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.card-menue button:hover:not(:disabled), .card-menue button:focus-visible { background: var(--akzent-hell); outline: none; }
.card-menue button:disabled { opacity: .45; cursor: default; }
.card-menue .farbpunkt { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
/* card.json → farbe (v2.10): Kachel getönt — hell wie dunkel aus derselben Grundfarbe gemischt, in jedem Stil */
:root[data-stil][data-modus] .minicard.gefaerbt { background: color-mix(in srgb, var(--card-farbe) 22%, var(--flaeche)); }
:root[data-stil="werkstatt"][data-modus="hell"] .werkbank .minicard.gefaerbt { background: color-mix(in srgb, var(--card-farbe) 28%, var(--kreide)); }
:root[data-stil="werkstatt"][data-modus="dunkel"] .werkbank .minicard.gefaerbt { background: color-mix(in srgb, var(--card-farbe) 28%, #2c3135); }
.card-menue .haken { display: inline-block; width: 14px; text-align: center; color: var(--akzent); }
.card-menue-teil { padding: 6px 10px 2px 26px; font-size: 11.5px; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
.card-menue hr { border: 0; border-top: 1px solid var(--linie); margin: 4px 0; }
.kopf-zahnrad { position: relative; align-self: center; display: inline-flex; padding: 4px; margin-left: -12px; border: 0; border-radius: 8px;
  background: none; color: inherit; cursor: pointer; opacity: .75; }
.kopf-zahnrad:hover, .kopf-zahnrad[aria-current="true"] { opacity: 1; }
.kopf-zahnrad svg { width: 20px; height: 20px; }
.zahnrad-punkt { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange, var(--akzent, #ff6a13)); box-shadow: 0 0 0 2px var(--stahl, var(--bg, #fff)); }
/* Update-Zeichen: leiser als der Punkt — ein Angebot, keine Aufgabe */
.kopf-update { align-self: center; display: inline-flex; padding: 3px; margin-left: -20px; border: 1px solid var(--linie); border-radius: 50%;
  background: none; color: var(--leise); cursor: pointer; }
.kopf-update:hover { color: var(--tinte); border-color: currentColor; }
.kopf-update svg { width: 13px; height: 13px; }
/* Fachwissen: offene Kandidaten bestätigen — sichtbar neben dem ⚙, eine Bitte, keine Warnung */
.kopf-fachwissen { align-self: center; padding: 3px 10px; border: 1px solid var(--akzent); border-radius: var(--rund);
  background: var(--akzent-hell); color: var(--tinte); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.kopf-fachwissen:hover, .kopf-fachwissen:focus-visible { border-color: var(--tinte); }
/* Fernzugang: am Rechner deutlich (ein Gerät bedient gerade mit), auf dem Gerät leise (nur ein Marker) */
.kopf-fern { align-self: center; padding: 3px 10px; border: 1px solid var(--warn); border-radius: var(--rund); background: none;
  color: var(--tinte); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.kopf-fern.geraet { border-color: var(--linie); color: var(--leise); }
.kopf-fern:hover, .kopf-fern:focus-visible { border-color: var(--tinte); }
.ki-knopf[aria-expanded="true"] { background: var(--akzent-hell); border-color: var(--akzent); }
.rechts-seite { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rechts-seite iframe.buehne { flex: 1; height: auto; min-height: 120px; }
.ki-griff { height: 6px; cursor: row-resize; background: var(--linie); flex: none; }
.ki-griff:hover { background: var(--akzent); }
.ki-feld { flex: none; height: var(--ki-hoehe, 300px); display: flex; flex-direction: column; background: #111413; color: #e8e6e1; min-height: 120px; }
.ki-kopf { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; border-bottom: 1px solid #2a2f2d; }
.ki-kopf .leise { color: #9a9e9b; font-family: var(--mono); font-size: 12px; }
.ki-aktionen { margin-left: auto; display: flex; gap: 6px; }
.ki-kopf .ki-konto { font-family: var(--sans); }
.ki-kopf .ki-konto.warn { color: #f2c230; }
.ki-feld .knopf { color: #e8e6e1; border-color: #3a403d; }
.ki-term { flex: 1; min-height: 0; padding: 4px 0 0 8px; }
.ki-hinweis { padding: 16px; font-size: 14px; color: #e8e6e1; }
.ki-hinweis code { font-family: var(--mono); background: #23302b; padding: 2px 6px; border-radius: 4px; }
/* KI-Feld klein (nur die Kopfleiste) oder abgeheftet (läuft in /ui/ki-fenster.html) */
.ki-symbol { display: inline-grid; place-items: center; padding: 4px 6px; }
.ki-symbol svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ki-klein[aria-pressed="true"] svg { transform: rotate(180deg); }
.ki-feld.klein, .ki-feld.draussen { height: auto; min-height: 0; }
.ki-feld.klein .ki-term, .ki-feld.klein .ki-hinweis, .ki-feld.draussen .ki-term, .ki-feld.draussen .ki-hinweis { display: none; }
.ki-feld.klein .ki-kopf, .ki-feld.draussen .ki-kopf { border-bottom: 0; cursor: pointer; }
.ki-punkt { display: none; width: 8px; height: 8px; border-radius: 50%; background: #f2c230; }
.ki-feld.klein.aktiv .ki-punkt { display: inline-block; animation: ki-puls 1.6s ease-in-out infinite; }
.ki-kopf .ki-karte { font-family: var(--sans); color: #e8e6e1; }
.ki-kopf .ki-karte:not(:empty)::before { content: "· "; color: #9a9e9b; }
.minicard.ki-laeuft:not(.aktiv) { box-shadow: inset 3px 0 0 #3ecf8e; }
.minicard.ki-schlaeft:not(.aktiv) { box-shadow: inset 3px 0 0 var(--linie); }
@keyframes ki-puls { 50% { opacity: .3; } }
.ki-fenster-seite { height: 100vh; margin: 0; overflow: hidden; }
.ki-fenster-seite .ki-feld { height: 100vh; }
@media (max-width: 860px) { .rechts-seite iframe.buehne { height: 60vh; flex: none; } .ki-feld { height: 50vh; } }

.marke svg { width: 26px; height: 26px; flex: none; }
:root[data-modus="dunkel"] .schalter input:not(:checked)::after { background: var(--leise); }

/* Räume: Leiste oben in der Spalte, Dialog „Bearbeitung teilen" */
.raum-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: inherit; opacity: .9;
  border: 1px solid var(--linie); border-radius: 10px; padding: 6px 8px 6px 10px; }
.raum-zeile.neu { border-color: var(--akzent); opacity: 1; }
.raum-liste { display: grid; gap: 4px; margin-bottom: 12px; }
.raum-wahl { display: flex !important; gap: 10px; align-items: flex-start; margin: 0 !important; padding: 8px 10px;
  border: 1px solid var(--linie); border-radius: 8px; cursor: pointer; }
.raum-wahl:has(input:checked) { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.raum-wahl small { display: block; opacity: .7; }
.raum-neu { border-left: 2px solid var(--akzent); padding-left: 12px; margin-bottom: 12px; }
.raum-art { display: grid; gap: 4px; margin-bottom: 12px; font-size: 14px; }
.raum-art label { margin: 0; }
.dlg-raum input[type="text"], .dlg-raum select { display: block; width: 100%; margin-top: 6px; font: inherit; color: inherit;
  background: transparent; border: 1px solid var(--linie); border-radius: 8px; padding: 7px 10px; }
.dlg-raum select option { color: #111; }
.raum-vorschau { font-size: 13px; color: inherit; margin: 4px 0 0; }
.raum-vorschau:empty { display: none; }
.raum-fehler { font-size: 13px; color: var(--warn); margin: 8px 0 0; }
.space { margin: 0 0 10px; }
.space-kopf { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 2px; margin: 0 0 6px; border: 0;
  border-bottom: 1px solid var(--linie, rgba(127,127,127,.3)); background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.space-kopf strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.space-kopf .space-pfeil { width: 1em; opacity: .7; transition: transform .15s; }
.space.zu .space-pfeil { transform: rotate(-90deg); }
.space-symbol { width: 16px; height: 16px; flex: none; }
.space.zu > .space-inhalt { display: none; }
.space-marke { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; opacity: .85; white-space: nowrap; }
.space-marke.warn { color: var(--warn); opacity: 1; }
.space-knopf { flex: none; }
.space-befund { font-size: 12px; color: var(--warn); margin: 0 0 8px; }
.space-neu { display: block; width: 100%; margin: 4px 0 14px; padding: 8px; border: 1px dashed var(--linie, rgba(127,127,127,.5));
  border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; opacity: .8; }
.space-neu:hover { opacity: 1; }
/* Labore in Home: „+“ und ⋯ rechts in der Überschrift */
.spalte h2.abschnitt.labor-kopf { display: flex; align-items: center; gap: 6px; }
.labor-kopf .labor-name { font-weight: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.labor-kopf .labor-knopf { flex: none; font: 600 17px/1 var(--sans); color: inherit; opacity: .8; text-transform: none; letter-spacing: 0; }
.labor-kopf .labor-knopf:first-of-type { margin-left: auto; }   /* „+“ bzw. ⋯ rechtsbündig */
.labor-kopf .labor-knopf:hover, .labor-kopf .labor-knopf:focus-visible { opacity: 1; background: var(--akzent-hell); color: var(--tinte); }
dialog#dlg-labor input[type=text] { display: block; width: 100%; margin-top: 6px; font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; }
.s-sicherung { border: 1px solid var(--linie, rgba(127,127,127,.35)); border-radius: 8px; padding: 8px 12px 10px; margin: 6px 0 12px; }
.s-sicherung legend { font-size: 13px; padding: 0 4px; }
.ordner-hilfe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; font-size: 12px; }
.ordner-hilfe .leise { margin-right: 2px; }
.ordner-hilfe .chip-knopf { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie, rgba(127,127,127,.4)); background: none; color: inherit; }
.ordner-hilfe .chip-knopf:hover { border-color: var(--akzent); }
.space .raum-zeile { margin-bottom: 6px; }
.space-bereich { margin: 0 0 6px; padding-left: 8px; border-left: 2px solid var(--linie, rgba(127,127,127,.3)); }
.space-bereich-kopf { margin: 2px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; opacity: .8; }
.space-bereich-kopf span { font-weight: 400; }
.raum-dateien { display: grid; gap: 4px; margin: 4px 0 12px; font-size: 13px; }
.raum-dateien h4 { margin: 0 0 2px; font-size: 13px; opacity: .8; }
.raum-datei { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid var(--linie, rgba(127,127,127,.25)); }
.raum-datei > span { min-width: 0; overflow-wrap: anywhere; }
.raum-datei small { display: block; opacity: .7; }
.raum-datei small.warn { color: var(--warn); opacity: 1; }
.raum-datei .knoepfe { display: flex; gap: 4px; flex: none; }
.raum-frage { margin: 10px 0 4px; font-weight: 600; font-size: 14px; }
.raum-art-wo { flex-direction: column; align-items: stretch; gap: 6px; }
dialog .raum-art-wo label { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 4px; }
.raum-art-wo label input { margin-top: 3px; }
.raum-art-wo label > span { display: inline-flex; flex-direction: column; gap: 1px; }
.raum-art-wo small { font-size: 12.5px; }

/* ---- Spalte „Häuser und Räume“ (2026-10-07): oben der Haus-Umschalter (eine Zeile, Liste klappt auf), darunter
   Labore bzw. Bereiche des gewählten Hauses als Chips. Chips umbrechen, nie seitlich scrollen; nur Variablen des Themas. ---- */
.spalte .chip-reihe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.spalte .haeuser { position: relative; z-index: 6; margin: 6px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
.spalte .raeume { margin: 0 0 12px; }
.spalte .raum-chip { display: inline-flex; align-items: stretch; max-width: 100%; min-width: 0;
  border: 1px solid var(--linie); background: var(--flaeche); transition: background .12s, border-color .12s; }
.spalte .raum-chip { border-radius: calc(var(--radius) / 2); }
.spalte .chip-knopf { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; border: 0; background: none;
  color: var(--tinte); cursor: pointer; border-radius: inherit; text-align: left; }
/* Haus-Umschalter: „⌂ Home Arbeit ▾“ + ⋯ (Aktionen des gewählten Hauses); Punkt = in einem ANDEREN Haus wartet etwas */
.spalte .haus-zeile { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.spalte .haus-knopf { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 11px;
  border: 1px solid var(--linie); border-radius: calc(var(--radius) / 2); background: var(--flaeche); color: var(--tinte);
  font: 600 14px/1.2 var(--sans); text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.spalte .haus-knopf:hover, .spalte .haus-knopf[aria-expanded="true"] { border-color: var(--akzent); }
.spalte .haus-zeichen { flex: none; width: 1.15em; text-align: center; color: var(--akzent); font-weight: 700; }
.spalte .haus-pfeil { flex: none; margin-left: auto; color: var(--leise); font-size: 11px; transition: transform .12s; }
.spalte .haus-knopf[aria-expanded="true"] .haus-pfeil { transform: rotate(180deg); }
.spalte .haus-mehr { flex: none; padding: 0 11px; border: 1px solid var(--linie); border-radius: calc(var(--radius) / 2);
  background: var(--flaeche); color: var(--leise); font: 700 14px/1 var(--sans); cursor: pointer; }
.spalte .haus-mehr:hover { border-color: var(--akzent); color: var(--tinte); }
.spalte .haus-knopf:focus-visible, .spalte .haus-mehr:focus-visible, .spalte .haus-liste button:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px; }
.spalte .haus-zeile.ueber .haus-knopf { outline: 2px dashed var(--akzent); outline-offset: 2px; background: var(--akzent-hell); }
/* Liste: Meine (Home-Spaces) · Gemeinsam (Spaces) · Neu/Beitreten — über den Räumen, nie seitlich scrollen */
.spalte .haus-liste { position: absolute; z-index: 20; left: -5px; right: -5px; top: calc(100% - 6px); display: grid; gap: 1px;
  padding: 4px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); box-shadow: var(--schatten); }
.spalte .haus-liste[hidden] { display: none; }
.spalte .haus-gruppe { padding: 6px 8px 2px; font: 600 11px/1.3 var(--sans); color: var(--leise); text-transform: uppercase; letter-spacing: .05em; }
.spalte .haus-liste button { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 6px 8px; border: 0;
  border-radius: 6px; background: none; color: var(--tinte); font: 500 13.5px/1.25 var(--sans); text-align: left; cursor: pointer; }
.spalte .haus-liste button:hover { background: var(--akzent-hell); }
.spalte .haus-eintrag.aktiv { font-weight: 700; }
.spalte .haus-eintrag.aktiv .haus-zeichen { color: var(--tinte); }
.spalte .haus-eintrag .haus-zahl, .spalte .haus-eintrag .haus-punkt { margin-left: auto; }
.spalte .haus-eintrag.ueber { outline: 2px dashed var(--akzent); outline-offset: -2px; background: var(--akzent-hell); }
.spalte .haus-liste hr { border: 0; border-top: 1px solid var(--linie); margin: 4px 2px; }
.spalte .haus-aktion { color: var(--leise); }
.spalte .haus-aktion .haus-zeichen { color: var(--leise); }
.spalte .raum-knopf { padding: 5px 9px; font: 500 12.5px/1.2 var(--sans); }
.spalte .chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spalte .chip-knopf .zahl { flex: none; color: var(--leise); font-weight: 400; }
.spalte .chip-knopf .zahl::before { content: "· "; }
.spalte .raum-chip:hover { border-color: var(--leise); }
.spalte .raum-chip.aktiv { background: var(--akzent); border-color: var(--akzent); }
.spalte .aktiv .chip-knopf, .spalte .aktiv .chip-mehr, .spalte .aktiv .chip-knopf .zahl { color: var(--akzent-text); }
.spalte .raum-chip.zurueck { background: transparent; border-style: dashed; }           /* Verworfen: zuletzt, zurückgenommen */
.spalte .raum-chip.zurueck .chip-knopf { color: var(--leise); }
.spalte .raum-chip.zurueck.aktiv { background: var(--leise); border-color: var(--leise); border-style: solid; }
.spalte .raum-chip.zurueck.aktiv .chip-knopf { color: var(--flaeche); }
.spalte .chip-mehr { flex: none; border: 0; background: none; color: var(--leise); cursor: pointer; padding: 0 9px 0 3px;
  font: 700 14px/1 var(--sans); border-radius: inherit; }
.spalte .chip-plus { flex: none; padding: 4px 11px; border: 1px dashed var(--linie); border-radius: var(--rund);
  color: var(--leise); font: 600 15px/1.2 var(--sans); }
.spalte .chip-plus:hover { border-color: var(--akzent); color: var(--tinte); }
.spalte .chip-knopf:focus-visible, .spalte .chip-mehr:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Punkt/Zähler je Haus in der Liste und Punkt am Umschalter: dort wartet etwas (Titel erklärt, was und wo) */
.spalte .haus-zahl { flex: none; min-width: 18px; padding: 0 5px; border-radius: var(--rund); background: var(--akzent);
  color: var(--akzent-text); font: 700 11px/18px var(--sans); text-align: center; }
.spalte .haus-punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.spalte .haus-eintrag.warn .haus-zahl, .spalte .haus-eintrag.warn .haus-punkt,
.spalte .haus-zeile.warn .umschalter-punkt { background: var(--warn); color: var(--flaeche); }
/* Ziehen auf einen Chip */
.spalte .raum-chip.ueber { outline: 2px dashed var(--akzent); outline-offset: 2px; background: var(--akzent-hell); }
.spalte .raum-chip.zurueck.ueber { outline-color: var(--warn); }
.spalte .haus-info { margin: -4px 0 10px; display: grid; gap: 4px; }
.spalte .haus-info[hidden] { display: none; }
.spalte .haus-info .space-befund { margin: 0; }
.spalte .haus-info .space-befund.leise { color: var(--leise); }
.spalte .haus-wer { font-size: 12px; }
.spalte #entdeckt:not(:empty) { display: grid; gap: 6px; margin: -2px 0 10px; }
/* Marker „im Showroom“ in eigener Zeile unter dem Titel — der Name bleibt lesbar */
.minicard .marken { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 16px; }
.minicard .marken .chip { align-self: flex-start; }
/* Veröffentlichte Fassung: „… · geändert seit Veröffentlichung“ gestrichelt umrandet, ↻ daneben (nur Variablen des Themas) */
.chip.showroom-marke.fassung-geaendert, .chip.showroom-marke.fassung-fehlt { outline: 1px dashed var(--warn); outline-offset: 1px; }
.minicard .marken { align-items: center; }
.minicard .marken .fassung-neu, .kopfzeile .fassung-neu { width: 22px; height: 22px; font-size: 14px; color: var(--warn); }
.minicard .marken .fassung-neu:hover, .kopfzeile .fassung-neu:hover { background: var(--akzent-hell); color: var(--tinte); }
/* Langer Marker („★ Showroom 2 · geändert seit Veröffentlichung“) bleibt in der Card: kürzen mit …, voller Text im Tooltip */
.minicard .marken { min-width: 0; }
.minicard .marken .chip.showroom-marke { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Titel darf zweizeilig werden statt „Auswer…“ — die Spalte bleibt schmal */
.spalte .minicard strong { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; min-width: 0; }
/* ---- Showroom-Seite: zweite Leiste mit den Home-Showrooms (Sammlungen, 2026-10-07) — Chip je Showroom mit Zähler, am
   gewählten ⋯ (nur lokal), „+“ legt einen an. Chips umbrechen, nie seitlich scrollen; nur Variablen des Themas. ---- */
.showroom-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0;
  padding: 10px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.showroom-leiste .sammlung-chip { display: inline-flex; align-items: stretch; max-width: 100%; min-width: 0;
  border: 1px solid var(--linie); border-radius: var(--rund); background: var(--bg); transition: background .12s, border-color .12s; }
.showroom-leiste .sammlung-chip:hover { border-color: var(--leise); }
.showroom-leiste .sammlung-knopf { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; padding: 6px 13px;
  border: 0; border-radius: inherit; background: none; color: var(--tinte); font: 500 14px/1.2 var(--sans); cursor: pointer; text-align: left; }
.showroom-leiste .sammlung-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showroom-leiste .zahl { flex: none; color: var(--leise); font-weight: 400; }
.showroom-leiste .zahl::before { content: "· "; }
.showroom-leiste .lokal-zeichen { flex: none; padding: 1px 6px; border: 1px solid var(--linie); border-radius: var(--rund);
  color: var(--leise); font: 600 10.5px/1.3 var(--sans); letter-spacing: .03em; }
.showroom-leiste .sammlung-chip.aktiv { background: var(--akzent); border-color: var(--akzent); }
.showroom-leiste .aktiv .sammlung-knopf, .showroom-leiste .aktiv .zahl, .showroom-leiste .aktiv .sammlung-mehr { color: var(--akzent-text); }
.showroom-leiste .aktiv .lokal-zeichen { color: var(--akzent-text); border-color: var(--akzent-text); }
.showroom-leiste .sammlung-mehr { flex: none; padding: 0 11px 0 3px; border: 0; border-radius: inherit; background: none;
  color: var(--leise); font: 700 15px/1 var(--sans); cursor: pointer; }
.showroom-leiste .sammlung-plus { flex: none; padding: 5px 12px; border: 1px dashed var(--linie); border-radius: var(--rund);
  background: none; color: var(--leise); font: 600 15px/1.2 var(--sans); cursor: pointer; }
.showroom-leiste .sammlung-plus-text { font-size: 13px; font-weight: 500; }
.showroom-leiste .sammlung-plus:hover { border-color: var(--akzent); color: var(--tinte); }
.showroom-leiste button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
dialog.sammlung-dlg input[type=text] { display: block; width: 100%; margin-top: 6px; font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; }
dialog.sammlung-dlg .aktionen .luecke { flex: 1; }
dialog.sammlung-dlg .leise { color: var(--leise); font-size: 13.5px; margin: 0 0 10px; }
/* „Veröffentlichen in“ (Showrooms Schritt 3a): je angebundenem Mneo-Showroom ein Schalter mit Stand — nur Variablen */
dialog.sammlung-dlg fieldset.ziele { margin: 4px 0 12px; padding: 8px 12px 2px; border: 1px solid var(--linie); border-radius: 8px; }
dialog.sammlung-dlg fieldset.ziele legend { padding: 0 4px; font-weight: 600; }
dialog.sammlung-dlg .ziel-zeile { margin: 0 0 8px; }
dialog.sammlung-dlg .ziel-zeile .leise { margin: 0; }
dialog.sammlung-dlg .ziel-stand[data-art="fehler"] { color: var(--warn); }
dialog.sammlung-dlg .ziel-liste { margin: 0 0 10px; padding-left: 18px; max-height: 40vh; overflow: auto; }
/* Hinweis „⚠ nutzt Daten“ (2026-10-07): klein, deutlich, nur Variablen des Themas — Tooltip nennt Dateien und Quellen */
.chip.daten-hinweis { background: transparent; border: 1px solid var(--warn); color: var(--warn); cursor: help; }
dialog .daten-hinweis { color: var(--warn); font-size: 13px; margin: 0 0 10px; }
/* Live-Daten im Showroom (Schritt 3b): Schalter in der Card-Ansicht, Zustand der Leitung je Ziel */
.chip.live-schalter { background: transparent; border: 1px dashed var(--linie); color: var(--leise); cursor: pointer; font: inherit; font-size: 12px; }
.chip.live-schalter[aria-pressed="true"] { border: 1px solid var(--akzent); color: var(--akzent); }
.live-neu { font-size: 12px; }
dialog.sammlung-dlg .leitung-stand[data-art="ok"] { color: var(--akzent); }
/* 📥 Eingang · 📤 Ausgang: Einträge im Kopf (mit Zähler); Overlay „In den Eingang legen“ beim Ziehen einer Datei aufs Fenster */
.nav-zahl { display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 6px; border-radius: var(--rund); background: var(--akzent-hell);
  color: var(--tinte); font-size: 11.5px; line-height: 1.5; text-align: center; }
/* ⚙-Reiter im Kopf („Im Kopf zeigen“): Symbol + Name; viele (.knapp) oder schmal → nur Symbol, Name als Tooltip.
   Die Leiste bricht um statt überzulaufen; ein Name wird höchstens 12em breit. */
.nav { flex-wrap: wrap; min-width: 0; }
.nav-reiter { display: contents; }
.nav-reiter a { white-space: nowrap; }
.nav-reiter-name { display: inline-block; max-width: 12em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.nav-reiter.knapp .nav-reiter-name { display: none; }
:root[data-stil] .kopf .nav .nav-reiter.knapp a, .kopf .nav .nav-reiter.knapp a { padding-left: 7px; padding-right: 7px; }   /* gilt auch gegen die Stile (design.css, stile.css) */
@media (max-width: 860px) { .nav-reiter-name { display: none; } }
.eg-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 78%, transparent); }
.eg-overlay-feld { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 48px; max-width: 520px; text-align: center;
  border: 2px dashed var(--akzent); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); pointer-events: none; }
.eg-overlay-feld strong { font: 600 20px/1.3 var(--serif); }
.eg-overlay-feld span:last-child { color: var(--leise); font-size: 14px; }
.eg-overlay-zeichen { font-size: 30px; }

/* Tablet (Fernzugang, 2026-10-09): Höhe ohne Browserleiste, Finger statt Maus — kleine Knöpfe etwas größer, Griff des
   KI-Felds greifbar und ohne Seiten-Scrollen beim Ziehen */
body.werkbank { height: 100dvh; }
@media (max-width: 860px) { body.werkbank { height: auto; } }
@media (pointer: coarse) {
  .symbol { width: 36px; height: 36px; font-size: 17px; }
  .labor-kopf .labor-knopf { min-width: 36px; min-height: 32px; }
  .ki-griff { height: 14px; touch-action: none; }
  .kopf-zahnrad { padding: 8px; }
}
/* Tastenleiste fürs KI-Feld: nur bei Fingerbedienung (Tablet ohne Tastatur) */
.ki-tasten, .ki-zeile { display: none; }
@media (pointer: coarse) {
  .ki-tasten { display: flex; gap: 6px; padding: 6px 8px; overflow-x: auto; border-top: 1px solid #2a2f2d; flex: none; }
  .ki-taste { flex: none; min-width: 44px; min-height: 36px; padding: 0 10px; border: 1px solid #3a403d; border-radius: 6px;
    background: #1b201e; color: #e8e6e1; font: 14px var(--mono); touch-action: manipulation; }
  .ki-taste:active, .ki-taste[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
  .ki-zeile { display: flex; gap: 6px; padding: 6px 8px 0; border-top: 1px solid #2a2f2d; flex: none; }
  .ki-zeile input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid #3a403d; border-radius: 6px;
    background: #1b201e; color: #e8e6e1; font: 16px var(--sans); }
  .ki-zeile input:focus { outline: 2px solid var(--akzent); outline-offset: 0; }
  .ki-zeile + .ki-tasten { border-top: 0; }
  .ki-feld.klein .ki-tasten, .ki-feld.draussen .ki-tasten, .ki-feld.klein .ki-zeile, .ki-feld.draussen .ki-zeile { display: none; }
}
/* ⋯ → Auf dem Handy öffnen (Handy-Link, tools/handylink.py) */
dialog.handy { width: min(520px, 92vw); }
.handy-qr { display: grid; place-items: center; margin: 12px 0 4px; }
.handy-qr svg { width: min(260px, 70vw); height: auto; background: #fff; border-radius: 8px; }
.handy-url { word-break: break-all; text-align: center; }
.handy-wahl { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.handy-aktiv { list-style: none; padding: 0; margin: 4px 0 8px; }
.handy-aktiv li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid var(--linie); }

/* Handy-Marke an der Card: 📱 im WLAN/Tailscale offen · 🌐 überall (über den Mneo-Server) — Klick öffnet den Handy-Dialog */
.minicard .chip.handy-marke { flex: 0 0 auto; cursor: pointer; font: inherit; font-size: .78em; border: 1px solid var(--rand, currentColor);
  background: transparent; color: inherit; padding: .05em .5em; line-height: 1.5; }
.minicard .chip.handy-marke.ueberall { border-color: var(--akzent); }
.minicard .chip.handy-marke:hover, .minicard .chip.handy-marke:focus-visible { background: var(--akzent); color: var(--akzent-text); }