/* ---- Farbschema: alle Farben als Variablen; „dunkel" tauscht nur die Werte ---- */
:root {
  color-scheme: light;
  --grund: #faf8f4; --karte: #fff; --flaeche: #f4efe5;
  --text: #2b2b2b; --text-stark: #3a352c;
  --akzent: #5d5136; --akzent-2: #8c7b52; --akzent-3: #6f6142; --gold: #c9a86a;
  --gedaempft: #a49b8b; --gedaempft-2: #b0a68f; --gedaempft-dunkel: #7d7362;
  --rand-stark: #d8d2c6; --rand: #e0dad0; --rand-leicht: #e6e1d6; --rand-zart: #efeae1; --rand-gold: #d8cfbc;
  --gelb: #fdf3df; --gelb-rand: #ecd9b0; --gelb-stark: #f6e3b4; --gelb-rand-stark: #d9bd7a;
  --gelb-hauch: #fffdf7; --gelb-hover: #f3e6c8; --gelb-text: #7a5c14;
  --gefahr: #a84b3d; --gefahr-hauch: #fbeeeb; --gefahr-rand: #f0d7d1; --gut: #2e7d4f;
  --tipp-grund: #3a352c; --tipp-text: #faf8f4;
  --schatten: 45, 40, 30;
}
html[data-schema="dunkel"] { color-scheme: dark; }
html[data-schema="dunkel"],
html:not([data-schema="hell"]):not([data-schema="dunkel"]).system-dunkel {
  --grund: #17150f; --karte: #221f19; --flaeche: #2c2822;
  --text: #ece6d8; --text-stark: #f3ede0;
  --akzent: #c9a86a; --akzent-2: #d4b878; --akzent-3: #d9c08a; --gold: #e0c98a;
  --gedaempft: #8f877a; --gedaempft-2: #7f776a; --gedaempft-dunkel: #b3a892;
  --rand-stark: #4a4438; --rand: #3e392f; --rand-leicht: #37322a; --rand-zart: #302b24; --rand-gold: #5a5040;
  --gelb: #3a3220; --gelb-rand: #5a4a25; --gelb-stark: #4a3d1c; --gelb-rand-stark: #7a6530;
  --gelb-hauch: #26221a; --gelb-hover: #4d4126; --gelb-text: #e3c77a;
  --gefahr: #e07060; --gefahr-hauch: #3a2320; --gefahr-rand: #4a2c28; --gut: #5fb37f;
  --tipp-grund: #e9e2d2; --tipp-text: #1d1a14;
  --schatten: 0, 0, 0;
}
html { background: var(--grund); }

@import "xterm.css";
/* Gedanken-Tafel */
* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", sans-serif;
  background: var(--grund);
  color: var(--text);
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  line-height: 1.5;
}
.kopf h1 { margin: 0; font-size: 1.6rem; }
.untertitel { margin: 0.2rem 0 1.2rem; color: var(--gedaempft-dunkel); font-size: 0.9rem; }

/* ---- Anmeldung: eine Karte in der Mitte --------------------------- */
.anmeldung { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.anmeldung-karte {
  width: min(380px, 100%);
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 24px 60px rgba(var(--schatten), 0.12);
  text-align: center;
}
.anmeldung-karte h1 { margin: 0 0 0.2rem; font-size: 1.5rem; }
.anmeldung-wort { margin: 0 0 1.2rem; color: var(--gedaempft); font-size: 0.9rem; }
.anmeldung-form { display: flex; flex-direction: column; gap: 0.6rem; }
.anmeldung-feld {
  font: inherit;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rand-stark);
  border-radius: 10px;
  background: var(--grund);
}
.anmeldung-feld:focus { outline: none; border-color: var(--gold); background: var(--karte); }
.anmeldung-knopf { margin-top: 0.4rem; }
.anmeldung-fehler { margin: 0 0 0.8rem; color: #a93226; font-size: 0.9rem; }
.anmeldung-hinweis { margin: 0 0 0.8rem; color: var(--akzent-2); font-size: 0.9rem; }
/* Abmelden hinter dem Zahnrad, als schlichter Textlink */
.abmelden-form { display: inline; margin-left: 0.4rem; }
.abmelden { background: none; border: none; padding: 0; font: inherit; color: var(--akzent-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* Hinweistext in zwei Fassungen: Rechner mit Tastenkürzeln, Handy ohne */
.hinweis-handy { display: none; }
@media (max-width: 639px) {
  .hinweis-rechner { display: none; }
  .hinweis-handy { display: inline; }
}

.diktat textarea {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rand-stark);
  border-radius: 10px;
  background: var(--karte);
  resize: vertical;
}
.diktat textarea:focus { outline: 2px solid var(--gold); border-color: transparent; }

.jetzt-zeile {
  /* unten fast kein Abstand: die angehefteten Zeilen schließen bündig an */
  margin: 1.2rem 0 0.25rem;
  padding: 1.1rem 1.3rem;
  /* kräftiger als die angehefteten Zeilen darunter, damit sie sich abhebt */
  background: var(--gelb-stark);
  border: 1px solid var(--gelb-rand-stark);
  border-radius: 12px;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--text);
  box-shadow: 0 -6px 0 0 var(--grund), 0 2px 6px rgba(120, 95, 40, 0.12);
}
.jetzt-wort { color: var(--gelb-text); }
.jetzt-wort { font-weight: 700; color: var(--gelb-text); }
/* Die ganze Box ist der Link, sieht aber weiter wie Text aus */
.jetzt-aufmacher { display: block; color: inherit; text-decoration: none; flex: 1; min-width: 0; }
/* Die Infobox: Text links, Status rechts */
.jetzt-zeile { display: flex; align-items: center; gap: 1rem; }
.jetzt-zeile > .jetzt-wort, .jetzt-zeile > .leer { flex: 0 1 auto; }
turbo-frame#chatraum_status { flex-shrink: 0; margin-left: auto; }
.status { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-decoration: none; color: var(--gedaempft-dunkel); }
.status-punkt { width: 0.9rem; height: 0.9rem; border-radius: 999px; box-shadow: 0 0 0 3px var(--gelb-stark), 0 0 0 4px var(--gelb-rand-stark); }
.status-wort { font-size: 0.7rem; line-height: 1; }
.jetzt-aufmacher:hover { color: var(--akzent); }
.jetzt-zeile .leer { color: var(--gedaempft-2); }

.gedanke {
  background: var(--karte);
  border: 1px solid var(--rand-leicht);
  border-radius: 10px;
  padding: 0.9rem 1rem 0.5rem;
  margin-bottom: 0.7rem;
}
/* Die Jetzt-Notiz ist auch in der Liste gelblich hinterlegt */
.gedanke.ist-jetzt { border-color: var(--gelb-rand); background: var(--gelb-hauch); }
/* Angeheftet: farbig, oben, zusammengeklappt auf den Titel */
.gedanke.angeheftet {
  background: var(--gelb);
  border-color: var(--gelb-rand);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  margin-bottom: 0.25rem;
}
.gedanke.angeheftet .gedanke-titel { margin: 0; -webkit-line-clamp: 1; }
.angeheftet-zeile { display: flex; align-items: center; gap: 0.6rem; }
.angeheftet-zeile .gedanke-aufmacher { flex: 1; min-width: 0; padding: 0; }
/* Die Nadel zum Lösen bleibt zurückhaltend, der Titel ist die Hauptsache */
.angeheftet-zeile .symbolknopf.aktiv { background: none; color: var(--gold); width: 1.7rem; height: 1.7rem; }
.angeheftet-zeile .symbolknopf.aktiv .symbol { width: 15px; height: 15px; }
.angeheftet-zeile .symbolknopf.aktiv:hover { background: var(--gelb-hover); color: var(--akzent); }
/* Ein aktiver Knopf (die gesetzte Nadel) ist gefüllt */
.symbolknopf.aktiv { background: var(--akzent); color: var(--karte); }
.symbolknopf.aktiv:hover { background: var(--text-stark); color: var(--karte); }
.gedanke .inhalt { margin: 0 0 0.4rem; white-space: pre-wrap; }

.meta, .gedanke-kopf, .gedanke-fuss {
  font-size: 0.8rem;
  color: var(--gedaempft);
}
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem;
}
.meta form { display: inline; margin: 0; }
.zeit { color: var(--gedaempft-2); }
.sichtbarkeit.privat { color: var(--gedaempft); }
.sichtbarkeit.oeffentlich { color: var(--gut); font-weight: 600; }

.textlink {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--akzent-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.textlink:hover { color: var(--akzent); }
.textlink.wichtig { color: #1d5fa8; }
.textlink.gefahr { color: var(--gefahr); }

.bearbeitung textarea {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--gold);
  border-radius: 8px;
}

/* Trix-Editor einpassen */
/* Die Werkzeugleiste klebt oben, solange das Diktat-Feld im Blick ist –
   bei langen diktierten Texten bleibt die Formatierung so erreichbar */
.diktat trix-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 0.3rem;
  padding: 0.4rem 0;
  background: var(--grund);
}
trix-toolbar .trix-button-group { background: var(--karte); border-color: var(--rand-stark); }
trix-editor {
  background: var(--karte);
  border: 1px solid var(--rand-stark);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  min-height: 4.5rem;
  font-size: 1.05rem;
}
trix-editor:focus { outline: 2px solid var(--gold); border-color: transparent; }
.diktat-fuss { margin-top: 0.4rem; text-align: right; }
.gedanke .inhalt .trix-content { margin: 0; }

/* Suchen und Kategorien */
.suchzeile { margin: 1.2rem 0 0.6rem; }
.suchfeld {
  width: 100%;
  font: inherit;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--rand-stark);
  border-radius: 10px;
  background: var(--karte);
  -webkit-appearance: none;
}
.suchfeld:focus { outline: 2px solid var(--gold); border-color: transparent; }

.kategorienzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.kategorie-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--karte);
  color: var(--gedaempft-dunkel);
  font-size: 0.85rem;
  text-decoration: none;
}
.kategorie-chip:hover { border-color: var(--gold); color: var(--akzent); }
.kategorie-chip.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--karte); }
.kategorie-chip .anzahl { font-size: 0.75rem; opacity: 0.65; }

.hashtag { color: var(--akzent-2); text-decoration: none; font-weight: 600; }
/* Web-Adresse im Text: kurz angezeigt, die volle steht im title */
.weblink { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rand-gold); word-break: break-all; }
.weblink:hover { text-decoration-color: var(--akzent-2); }
/* Weiterleiten steht mit Abstand rechts für sich */
.symbolknopf.weiterleiten { margin-left: 0.7rem; }
.hashtag:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Ein Verweis im Text (G-44): sieht aus wie die Kennung, öffnet den Gedanken */
.kennung-verweis { text-decoration: none; vertical-align: 1px; }
.kennung-verweis:hover { border-color: var(--gold); color: var(--akzent); }
/* „verwiesen aus G-45": unter dem Text, gedämpft */
.buehne-verweise {
  margin: 1.2rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--rand-zart);
  font-size: 0.8rem;
  color: var(--gedaempft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.leermeldung { color: var(--gedaempft); font-style: italic; padding: 0.8rem 0; }

/* Kontextmenü im Diktat-Feld */
.kontextmenue {
  position: absolute;
  z-index: 50;
  min-width: 11rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.3rem;
  background: var(--karte);
  border: 1px solid var(--rand-stark);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(var(--schatten), 0.18);
}
.kontextmenue-gruppe { padding: 0.15rem 0; }
.kontextmenue-gruppe + .kontextmenue-gruppe { border-top: 1px solid var(--rand-zart); }
.kontextmenue-eintrag {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-stark);
  cursor: pointer;
}
.kontextmenue-eintrag:hover { background: var(--flaeche); }
.kontextmenue-eintrag.neu { color: var(--akzent-2); }
.kontextmenue-leer {
  display: block;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  color: var(--gedaempft-2);
}

/* Code-Auszeichnung aus Trix */
.trix-content pre, .inhalt pre {
  background: var(--flaeche);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
}
.menue-knopf { margin-right: 1rem; color: var(--akzent-2); }

/* Am Handy erscheint nur, was gebraucht wird; ab 640px ist alles offen */
.ausklapp-knopf {
  display: none;
  background: none;
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  margin-bottom: 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--gedaempft-dunkel);
  cursor: pointer;
}
.ausklapp-knopf.schmal { margin: 0; padding: 0.1rem 0.6rem; line-height: 1.2; }
.ausklapp-knopf:hover { border-color: var(--gold); color: var(--akzent); }
.aktionen { display: flex; align-items: center; gap: 0.15rem; }
/* Eine eigene display-Regel schlägt das UA-Stylesheet für [hidden];
   ohne diese Zeile bliebe der Bereich trotz hidden sichtbar */
.aktionen[hidden] { display: none; }

@media (max-width: 639px) {
  .ausklapp-knopf { display: inline-block; }
  .aktionen { display: flex; flex-wrap: wrap; gap: 0.9rem; width: 100%; }
}

/* Schwebende Fenster (nur Desktop) */
.tisch { display: none; }
.tisch-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.tisch-wort { font-size: 0.85rem; color: var(--gedaempft); margin-right: 0.2rem; }
/* Die Fläche liegt über der Seite, lässt Klicks aber durch; nur die Fenster
   selbst fangen sie ab, sonst wäre die Tafel darunter nicht mehr bedienbar */
.tisch-flaeche {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}
.tisch-flaeche .winbox { pointer-events: auto; }

.fenster-rumpf { height: 100%; overflow-y: auto; padding: 0.8rem 1rem; background: var(--karte); }
/* Das Terminal bringt seine eigene Fläche mit und füllt das Fenster ganz */
.fenster-rumpf:has(.fenster-terminal) { padding: 0; overflow: hidden; }
.fenster-kopfzeile { margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--gedaempft); }
.fenster-eintrag {
  border-bottom: 1px solid var(--rand-zart);
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
}
.fenster-eintrag:last-child { border-bottom: none; }
.fenster-eintrag .inhalt { font-size: 0.9rem; white-space: pre-wrap; margin-bottom: 0.3rem; }

@media (min-width: 900px) {
  .tisch { display: block; }
}
/* WinBox-Blau an die Tafel angleichen */
.winbox { background: var(--akzent); border-radius: 8px 8px 0 0; box-shadow: 0 10px 30px rgba(var(--schatten), 0.25); }
.winbox .wb-title { font: inherit; font-size: 0.9rem; }
.winbox .wb-body { background: var(--karte); margin: 0; }

/* Sammeln aus dem Text */
.sammel-knopf {
  position: absolute;
  z-index: 60;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--akzent);
  border-radius: 999px;
  background: var(--akzent);
  color: var(--karte);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--schatten), 0.2);
}
.sammel-knopf:hover { background: var(--akzent-3); }
.herkunft { color: var(--gedaempft-2); font-style: italic; }

/* Terminal im Fenster */
.fenster-terminal { height: 100%; display: flex; flex-direction: column; background: var(--text); }
.terminal-flaeche { flex: 1; min-height: 0; padding: 0.4rem; }
.terminal-zustand {
  margin: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  color: var(--rand-gold);
  background: var(--text-stark);
}

/* Kennung und Karte */
.kennung {
  background: none;
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 0 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--akzent-2);
  cursor: pointer;
}
.kennung { text-decoration: none; display: inline-block; }
.kennung:hover { border-color: var(--gold); color: var(--akzent); }
.kennung.klein { cursor: default; }

.karte { height: 100%; display: flex; flex-direction: column; }
.karte form { display: flex; flex-direction: column; height: 100%; }
.karte trix-editor { flex: 1; overflow-y: auto; min-height: 6rem; }
.karte trix-toolbar { position: sticky; top: 0; background: var(--karte); z-index: 2; }
.karte-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7rem;
  padding-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--gedaempft);
}
.karte-fuss input[type="submit"] { margin-left: auto; }
.karte-zustand { color: var(--akzent-2); font-style: italic; }
.kontextmenue-eintrag .anzahl { margin-left: 0.4rem; font-size: 0.75rem; opacity: 0.6; }
.hinweis {
  margin: 0 0 1rem;
  padding: 0.6rem 1rem;
  background: var(--gelb);
  border: 1px solid var(--gelb-rand);
  border-radius: 10px;
  font-size: 0.9rem;
  color: #8c6d2f;
}

/* Lange Texte kürzen */
.inhalt.gekuerzt {
  max-height: 260px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
/* Der Knopf dreht sich, wenn der Text ausgeklappt ist */
.weiterlesen .symbol { transition: transform 160ms ease; }
.inhalt:not(.gekuerzt) + .weiterlesen-zeile .weiterlesen .symbol { transform: rotate(180deg); }

/* Bearbeiten an Ort und Stelle: Leiste und Formatierung kleben oben */
.bearbeiten-leiste {
  position: sticky;
  top: 0;
  z-index: 22;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  height: 2.4rem;
  background: var(--karte);
  border-bottom: 1px solid var(--rand-zart);
  font-size: 0.8rem;
  color: var(--gedaempft);
}
.bearbeitung form { display: flex; flex-direction: column; }
.bearbeitung trix-toolbar {
  position: sticky;
  top: 2.4rem;
  z-index: 21;
  background: var(--karte);
  padding: 0.4rem 0;
}
.bearbeitung trix-editor { min-height: 8rem; }

/* ---- Symbolknöpfe statt Textlinks ---------------------------------- */
.symbolknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--gedaempft);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.symbolknopf:hover { background: var(--flaeche); color: var(--akzent); border-color: var(--rand-leicht); }
.symbolknopf:active { transform: scale(0.92); }
.symbolknopf.gefahr:hover { background: var(--gefahr-hauch); color: var(--gefahr); border-color: var(--gefahr-rand); }
.symbolknopf .symbol { display: block; }
/* Eigene display-Regel schlägt das UA-Stylesheet für [hidden] */
.symbolknopf[hidden] { display: none; }
/* button_to erzeugt ein form-Element drumherum */
.gedanke-fuss form, .karte-fuss form { display: inline; margin: 0; }

/* ---- Kopf und Fuß eines Gedankens ---------------------------------- */
.gedanke-kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  margin-bottom: 0.2rem;
  min-width: 0;
}
/* Ohne min-width sprengt ein langer Inhalt jedes Flex-Kind seine Box */
.gedanke, .gedanke-kopf > *, .gedanke-fuss > * { min-width: 0; }
.gedanke-kopf .zeit { margin-left: auto; }
.gedanke-fuss {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.3rem;
}
.weiterlesen-zeile { margin: 0.2rem 0 0; text-align: right; }
.nur-handy { display: none; }

@media (max-width: 639px) {
  .nur-handy { display: inline-flex; }
  .aktionen[hidden] { display: none; }
  .aktionen { display: flex; gap: 0.15rem; }
}

/* ---- Kopfzeile ------------------------------------------------------ */
.kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.kopf h1 { flex: 1; text-align: center; font-size: 1.3rem; margin: 0; }
.kopf .untertitel {
  flex-basis: 100%;
  margin: 0.4rem 0 0;
  padding: 0.6rem 0.9rem;
  background: var(--karte);
  border: 1px solid var(--rand-leicht);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--gedaempft-dunkel);
}
.kopf kbd {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--rand-stark);
  border-radius: 4px;
  background: var(--grund);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.75rem;
}

/* ---- Suche als Überlagerung, kommt mit K --------------------------- */
.palette {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  height: 100dvh;
  padding: 10dvh 1rem 0;
  background: rgba(var(--schatten), 0.25);
  backdrop-filter: blur(2px);
}
body.suche-offen .palette { display: block; }
.palette-kasten {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem;
  background: var(--grund);
  border: 1px solid var(--rand-stark);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(var(--schatten), 0.25);
  animation: palette-auf 140ms ease-out;
}
@keyframes palette-auf {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.palette .suchzeile { margin: 0 0 0.7rem; }
.palette .kategorienzeile { margin: 0; }

.filterhinweis {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  color: var(--akzent-2);
  font-weight: 600;
}
.filterhinweis .anzahl { font-weight: 400; color: var(--gedaempft); }
.filterhinweis .symbolknopf { margin-left: -0.2rem; }
/* Das rote X: Filter aufheben. Rund, gefüllt, damit es auch am Handy auffällt */
.filter-aus {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.35);
  transition: transform 120ms ease, background 120ms ease;
}
.filter-aus:hover { background: #a93226; color: #fff; transform: scale(1.08); }
.filter-aus .symbol { stroke-width: 2.2; }

/* ---- Werkzeugleiste: die häufigen Knöpfe, Rest hinter … ------------ */
.diktat trix-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.diktat trix-toolbar .trix-button-group { margin: 0; }
.diktat trix-toolbar:not(.zeigt-alles) .trix-button--icon-strike,
.diktat trix-toolbar:not(.zeigt-alles) .trix-button--icon-quote,
.diktat trix-toolbar:not(.zeigt-alles) .trix-button--icon-code,
.diktat trix-toolbar:not(.zeigt-alles) .trix-button--icon-number-list,
.diktat trix-toolbar:not(.zeigt-alles) .trix-button--icon-decrease-nesting-level,
.diktat trix-toolbar:not(.zeigt-alles) .trix-button--icon-increase-nesting-level,
.diktat trix-toolbar:not(.zeigt-alles) .trix-button-group--history-tools { display: none; }
.mehr-knopf {
  width: 2rem;
  height: 1.8rem;
  border: 1px solid var(--rand-stark);
  border-radius: 6px;
  background: var(--karte);
  color: var(--gedaempft-dunkel);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease;
}
.mehr-knopf:hover { background: var(--flaeche); }

/* ---- Knopf mit Beschriftung ---------------------------------------- */
.knopf {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--rand-stark);
  border-radius: 999px;
  background: var(--karte);
  font: inherit;
  font-size: 0.85rem;
  color: var(--akzent);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.knopf:hover { background: var(--flaeche); border-color: var(--gold); }
.knopf:active { transform: scale(0.97); }
.knopf.wichtig { background: var(--akzent); border-color: var(--akzent); color: var(--karte); }
.knopf.wichtig:hover { background: var(--akzent-3); }
.diktat-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.palette-fenster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rand-leicht);
}
.palette-wort { font-size: 0.8rem; color: var(--gedaempft); margin-right: 0.2rem; }

/* Die Werkzeugleiste kommt erst, wenn geschrieben wird - auf jeder Breite.
   Muss nach den Leisten-Regeln stehen, sonst gewinnt deren display. */
.diktat:not(.aktiv) lexxy-toolbar,
.diktat:not(.aktiv) trix-toolbar { display: none; }
/* Ebenso das Thema-Zeichen und Festhalten: erst wenn es etwas festzuhalten
   gibt. display statt visibility, sonst bleibt ein Loch stehen. */
.diktat:not(.aktiv) .diktat-fuss { display: none; }

/* ---- Eigene Tooltips: sofort da, gestaltbar ------------------------ */
[data-tipp] { position: relative; }
[data-tipp]::after {
  content: attr(data-tipp);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 300;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  background: var(--tipp-grund);
  color: var(--tipp-text);
  font-size: 0.75rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.35;
  white-space: pre;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
[data-tipp]:hover::after, [data-tipp]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 200ms;
}
/* Am linken Rand nach rechts ausrichten, damit nichts abgeschnitten wird */
[data-tipp].tipp-links::after { left: 0; transform: translate(0, 4px); }
[data-tipp].tipp-links:hover::after { transform: translate(0, 0); }
/* Rückmeldung nach einer Aktion („G-16 kopiert"): kurz einblenden, auch am
   Handy, wo es sonst keine Tooltips gibt */
[data-tipp].tipp-zeigen::after {
  content: attr(data-tipp);
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0ms;
}
[data-tipp].tipp-links.tipp-zeigen::after { transform: translate(0, 0); }

/* Wichtiger Symbolknopf: der, den man am häufigsten drückt */
.symbolknopf.wichtig { background: var(--akzent); border-color: var(--akzent); color: var(--karte); }
.symbolknopf.wichtig:hover { background: var(--akzent-3); border-color: var(--akzent-3); color: var(--karte); }
.leiste-wort { font-size: 0.8rem; color: var(--gedaempft); margin-right: auto; }
.weiterlesen-zeile { display: flex; justify-content: flex-end; }

/* ---- Lexxy in die Farben der Tafel bringen -------------------------
   Alle Farben des Editors hängen an diesen Variablen (siehe
   lexxy-variables.css im Gem). Blau und Schwarz wären hier Fremdkörper. */
:root {
  --lexxy-color-ink: var(--text-stark);
  --lexxy-color-ink-medium: var(--gedaempft-dunkel);
  --lexxy-color-ink-light: var(--gedaempft);
  --lexxy-color-ink-lighter: var(--rand);
  --lexxy-color-ink-lightest: var(--flaeche);

  /* Akzent: das Gold-Braun der Tafel statt Blau */
  --lexxy-color-accent-dark: var(--akzent-2);
  --lexxy-color-accent-medium: var(--gold);
  --lexxy-color-accent-light: var(--gelb-rand);
  --lexxy-color-accent-lightest: var(--flaeche);
  --lexxy-color-blue: var(--akzent-2);
  --lexxy-color-selected: var(--flaeche);
  --lexxy-color-selected-hover: var(--gelb-rand);
  --lexxy-color-selected-dark: var(--gold);

  --lexxy-color-red: var(--gefahr);
  --lexxy-color-green: var(--gut);
  --lexxy-color-canvas: var(--karte);
  --lexxy-color-code-bg: var(--flaeche);

  --lexxy-font-base: -apple-system, "Segoe UI", sans-serif;
  --lexxy-radius: 9px;
  --lexxy-shadow: 0 8px 24px rgba(var(--schatten), 0.18);
  --lexxy-focus-ring-color: var(--gold);

  /* Die Leiste war höher als zwei Zeilen Text – das drückt sich vor */
  --lexxy-toolbar-button-size: 1.6lh;
}

/* Der aktive Knopf soll gefüllt sein, nicht nur blass hinterlegt */
lexxy-toolbar button[aria-pressed="true"],
lexxy-toolbar button.active {
  background-color: var(--akzent);
  color: var(--grund);
}

/* ---- Kompakte Liste: Titel und Anriss statt ganzer Text ------------- */
.gedanke { padding: 0.6rem 0.9rem; margin-bottom: 0.45rem; }
.gedanke-aufmacher {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 0.2rem 0;
  transition: opacity 120ms ease;
}
.gedanke-aufmacher:hover { opacity: 0.72; }
.gedanke-titel {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  /* Höchstens zwei Zeilen, danach Auslassungszeichen */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gedanke-anriss {
  margin: 0;
  font-size: 0.88rem;
  color: var(--gedaempft-dunkel);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gedanke-fuss { justify-content: space-between; margin-top: 0.35rem; }
.themen { display: flex; flex-wrap: wrap; gap: 0.4rem; position: relative; }
/* Der #-Knopf in der Liste und die schwebenden Themen dahinter */
.themen-knopf {
  /* sonst malt Safari am iPhone seinen grauen Standardknopf */
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: none;
  padding: 0.05rem 0.5rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--akzent-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.themen-knopf .anzahl { font-weight: 400; color: var(--gedaempft); }
.themen-knopf:hover, .themen-knopf[aria-expanded="true"] { border-color: var(--gold); color: var(--akzent); }
.themen-schwebend {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  max-width: min(70vw, 22rem);
  padding: 0.5rem 0.7rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(var(--schatten), 0.18);
  animation: themen-auf 140ms ease-out;
}
/* display:flex würde das hidden-Attribut sonst überstimmen */
.themen-schwebend[hidden] { display: none; }
@keyframes themen-auf {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.thema-marke {
  font-size: 0.75rem;
  color: var(--akzent-2);
  text-decoration: none;
  font-weight: 600;
}
.thema-marke:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Die große Ansicht in der Mitte -------------------------------- */
.buehne {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* dvh statt vh: auf dem iPhone rechnet vh ohne Safaris Leisten, dann
     rutscht der Fuß der Karte darunter. Dazu der Sicherheitsabstand. */
  height: 100dvh;
  padding: 4dvh 1rem calc(3dvh + env(safe-area-inset-bottom));
  background: rgba(var(--schatten), 0.3);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}
.buehne-karte {
  width: min(760px, 100%);
  max-height: calc(100dvh - 7dvh - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(var(--schatten), 0.28);
  animation: buehne-auf 160ms ease-out;
}
@keyframes buehne-auf {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: none; }
}
/* Kopf und Fuß stehen fest, nur der Text darin läuft */
.buehne-kopf, .buehne-fuss {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.1rem;
  font-size: 0.8rem;
  color: var(--gedaempft);
  flex-shrink: 0;
}
.buehne-kopf { border-bottom: 1px solid var(--rand-zart); }
.buehne-fuss { border-top: 1px solid var(--rand-zart); justify-content: space-between; }
.buehne-kopf .zeit { margin-left: auto; }
.buehne-inhalt {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.4rem;
  line-height: 1.6;
}
body.buehne-offen { overflow: hidden; }

/* Lexxys Vorschlagsliste: Anzahl rechts, gedämpft */
lexxy-prompt-menu .anzahl { margin-left: 0.5rem; font-size: 0.75rem; opacity: 0.55; }
.prompt-name { font-weight: 600; }

/* Bearbeiten in der Mitte: das Formular füllt die Karte */
.buehne-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.buehne-form .buehne-inhalt { padding: 0.8rem 1rem; }
.buehne-form lexxy-editor { min-height: 35dvh; }
.buehne-kopf .leiste-wort { margin-right: auto; }

/* Anreißer statt Eingabefeld: ein Klick öffnet die Notiz in der Mitte */
.anreisser {
  display: block;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--rand-stark);
  border-radius: 10px;
  background: var(--karte);
  color: var(--gedaempft);
  font-size: 1.05rem;
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}
.anreisser:hover { border-color: var(--gold); color: var(--gedaempft-dunkel); }
.anreisser kbd {
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--rand);
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.75rem;
}

/* Titelfeld in der Mitte: die Überschrift der Notiz */
.titelfeld {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--rand-zart);
  padding: 0 0 0.5rem;
  margin-bottom: 0.6rem;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  background: none;
}
.titelfeld:focus { outline: none; border-bottom-color: var(--gold); }
.titelfeld::placeholder { color: var(--rand-gold); font-weight: 700; }
.hinweis-klein { font-size: 0.75rem; color: var(--gedaempft-2); }
.hinweis-klein kbd {
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--rand);
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
}

/* Lange Wörter und Adressen dürfen die Breite nicht sprengen */
.gedanke-titel, .gedanke-anriss, .inhalt, .buehne-inhalt, .jetzt-zeile {
  overflow-wrap: anywhere;
}

/* Löschen sitzt oben und ist kleiner - kein Nachbar der häufigen Knöpfe */
.gedanke-kopf .symbolknopf.klein {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: -0.2rem;
  opacity: 0.5;
}
.gedanke-kopf .symbolknopf.klein:hover { opacity: 1; }
.gedanke-kopf form { display: inline; margin: 0; }

@media (max-width: 639px) {
  /* Am Handy tippt niemand N */
  .anreisser kbd { display: none; }
}

/* Am Handy gibt es kein Überfahren mit der Maus – und die unsichtbaren
   Tooltips schoben die Seite breiter, weil opacity:0 den Platz behält */
@media (max-width: 639px) {
  [data-tipp]::after { content: none; }
}
/* Sicherheitsnetz: seitlich wird nie geschoben.
   clip statt hidden - hidden macht position:sticky in der Seite wirkungslos */
html, body { overflow-x: clip; }

/* Treffer in der Suchbox */
.treffer { list-style: none; margin: 0; padding: 0; max-height: 50dvh; overflow-y: auto; }
.treffer-zeile {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.treffer-zeile:hover { background: var(--flaeche); }
.treffer-titel {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.treffer-fuss { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--gedaempft-2); text-align: right; }

/* Der Stapel: Infobox und angeheftete Zeilen bleiben ebenfalls stehen;
   ihr top setzt der stapel-Controller aus den Höhen darüber */
.jetzt-zeile, .gedanke.angeheftet { position: sticky; z-index: 29; }
/* Der Rand über jeder klebenden Zeile in Seitenfarbe, sonst scheint beim
   Scrollen der Text durch den Abstand */
.anreisser, .jetzt-zeile, .gedanke.angeheftet { box-shadow: 0 -6px 0 0 var(--grund); }
/* Akkordeon: sobald gescrollt ist (html.gestapelt), ziehen sich die klebenden
   Zeilen zusammen; nur der Text bleibt stehen */
.anreisser, .jetzt-zeile, .gedanke.angeheftet, .kopf {
  transition: padding 160ms ease, margin 160ms ease, font-size 160ms ease;
}
html.gestapelt .kopf { padding-top: 0.15rem; }
html.gestapelt .anreisser { padding: 0.4rem 1.1rem; margin-bottom: 0.2rem; font-size: 0.95rem; }
html.gestapelt .jetzt-zeile { padding: 0.5rem 1.3rem; margin-bottom: 0.2rem; font-size: 1rem; }
html.gestapelt .gedanke.angeheftet { padding-top: 0.2rem; padding-bottom: 0.2rem; margin-bottom: 0.2rem; }
/* Ein klebendes Element klebt nur innerhalb seines Elternteils; der
   turbo-frame um die Karte ist genau so hoch wie sie, darum fällt er weg */
turbo-frame:has(> .gedanke.angeheftet) { display: contents; }
/* Kopfzeile und Anreißer bleiben beim Scrollen stehen */
.kopf, .anreisser {
  position: sticky;
  z-index: 30;
  background: var(--grund);
}
.kopf { top: 0; padding-top: 0.4rem; }
.anreisser { top: 3.2rem; }

/* Die Lupe darf größer sein, sie ist der Einstieg in die Suche */
.kopf .symbolknopf { width: 2.4rem; height: 2.4rem; }
.kopf .symbolknopf .symbol { width: 22px; height: 22px; }

.nur-desktop { display: inline-flex; }
@media (max-width: 899px) {
  /* Terminal gibt es nur am Rechner */
  .nur-desktop { display: none; }
}

@media (max-width: 639px) {
  /* Tastenkürzel-Hinweise nützen am Handy nichts */
  .hinweis-klein { display: none; }
  .buehne-fuss { justify-content: flex-end; }
}

/* ---- Die Karte: Zusammenfassung zu einem Thema --------------------- */
.karte-block {
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.9rem;
  background: var(--gelb-hauch);
  border: 1px solid var(--gelb-rand);
  border-radius: 10px;
}
.karte-block.leer { background: none; border-style: dashed; padding: 0; }
.karte-kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.karte-kopf h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gelb-text);
}
.karte-text { font-size: 0.9rem; line-height: 1.5; color: var(--text-stark); }
.karte-text p:first-child { margin-top: 0; }
.karte-text p:last-child { margin-bottom: 0; }
.karte-anlegen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem;
  color: var(--gedaempft);
  font-size: 0.85rem;
  text-decoration: none;
}
.karte-anlegen:hover { color: var(--akzent-2); }
.karte-titelfeld {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--gelb-rand);
  padding: 0 0 0.3rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gelb-text);
  background: none;
}
.karte-titelfeld:focus { outline: none; border-bottom-color: var(--gold); }
.karte-block.bearbeiten { background: var(--karte); }

/* ---- Einstellungen hinter dem Zahnrad --------------------------------- */
.einstellungen-form { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.4rem; }
.einstellungen-feld {
  flex: 1 1 8rem; min-width: 0;
  font: inherit; font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rand); border-radius: 8px;
  background: var(--karte); color: var(--text);
}
.einstellungen-feld.breit { flex-basis: 16rem; }
.einstellungen-feld:focus { outline: none; border-color: var(--gold); }
.knopf.klein { padding: 0.3rem 0.8rem; font-size: 0.85rem; }

/* ---- Farbschema wählen (hinter dem Zahnrad) --------------------------- */
.schema-wahl { display: inline-flex; gap: 0.3rem; margin-left: 0.6rem; vertical-align: middle; }
.schema-knopf {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--rand); border-radius: 999px; background: var(--karte);
  padding: 0.1rem 0.6rem; font: inherit; font-size: 0.8rem; color: var(--gedaempft-dunkel); cursor: pointer;
}
.schema-knopf:hover { border-color: var(--gold); color: var(--akzent); }
.schema-knopf.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--karte); }

/* ---- Am Rechner: größere Schrift in den Boxen, Symbole links wie am Handy ---- */
@media (min-width: 900px) {
  .gedanke-titel { font-size: 1.15rem; }
  .gedanke.angeheftet .gedanke-titel { font-size: 1.1rem; }
  .jetzt-zeile { font-size: 1.3rem; }
  .gedanke-fuss { justify-content: flex-start; gap: 0.6rem; }
  .gedanke-fuss .aktionen { gap: 0.5rem; }
}

/* ---- Sammeln-Menü: zwei Wege, als Notiz oder in die Karte --------------- */
.kontextmenue-wort { display: block; padding: 0.35rem 0.6rem 0.1rem; font-size: 0.7rem; color: var(--gedaempft); text-transform: none; }
.karte-quelle { font-size: 0.75rem; color: var(--gedaempft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Sammeln-Knopf und Menü liegen über der Bühne (z 250) und über den Fenstern (z 100) */
.sammel-knopf, .kontextmenue { z-index: 320; }
/* Solange eine Notiz groß offen ist, bleiben die Fenster darüber sichtbar:
   die Sammelbox soll man beim Markieren sehen, nicht hinter dem Weichzeichner */
body.buehne-offen .tisch-flaeche { z-index: 300; }

/* ---- Karten aus dem Werkzeugkasten ------------------------------------- */
.karten-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.6rem 0 0.2rem; }
.karten-wort { font-size: 0.8rem; color: var(--gedaempft); }
.karten-neu { background: var(--gelb-stark); border-color: var(--gelb-rand-stark); color: var(--gelb-text); font-weight: 600; cursor: pointer; font: inherit; font-size: 0.85rem; }
.karten-neu:hover { background: var(--gelb-hover); }
.karte-chip { background: var(--gelb); border-color: var(--gelb-rand); color: var(--gelb-text); }
/* Ein Fenster, in dem eine Karte steht, hebt sich farblich ab */
.winbox:has(.karte-block:not(.leer)) { background: var(--gelb-rand-stark); }
.winbox:has(.karte-block:not(.leer)) .wb-title { color: var(--text); }

/* ---- Sammeln: kleine Leiste statt Knopf, Text fliegt zur Karte ---------- */
.sammel-leiste { position: absolute; z-index: 320; display: inline-flex; gap: 0.25rem; }
.sammel-leiste[hidden] { display: none; }
.sammel-leiste .sammel-knopf { position: static; }
.sammel-mehr { padding-left: 0.55rem; padding-right: 0.55rem; font-weight: 700; }
.flug {
  position: fixed; z-index: 400; pointer-events: none;
  padding: 0.4rem 0.6rem; border-radius: 8px;
  background: var(--gelb-stark); color: var(--text); border: 1px solid var(--gelb-rand-stark);
  font-size: 0.85rem; line-height: 1.3; overflow: hidden; max-height: 5rem;
  box-shadow: 0 8px 24px rgba(var(--schatten), 0.25);
  transform-origin: top left;
  transition: left 520ms cubic-bezier(.2,.8,.2,1), top 520ms cubic-bezier(.2,.8,.2,1), transform 520ms ease, opacity 420ms ease 120ms;
}
/* Das Menü bleibt handlich, die lange Liste läuft darin */
.kontextmenue { max-height: 18rem; overflow-y: auto; }

/* ---- Werkzeugkasten: aufklappbare Abschnitte ------------------------------- */
details.werkzeug { margin: 0.4rem 0 0; }
details.werkzeug summary { cursor: pointer; font-size: 0.8rem; color: var(--gedaempft-dunkel); padding: 0.15rem 0; list-style: none; }
details.werkzeug summary::-webkit-details-marker { display: none; }
details.werkzeug summary::before { content: "▸ "; opacity: 0.6; }
details.werkzeug[open] summary::before { content: "▾ "; }
details.werkzeug > *:not(summary) { margin-top: 0.3rem; }

/* ---- Esc als Knopf, oben links, wie eine Tastenkappe --------------------- */
.esc-taste {
  position: fixed; top: 0.7rem; left: 0.7rem; z-index: 350;
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.3rem 0.55rem 0.35rem;
  color: var(--gedaempft-dunkel); background: var(--karte);
  border: 1px solid var(--rand-stark); border-bottom-width: 3px; border-radius: 7px;
  cursor: pointer; opacity: 0.75;
  transition: opacity 120ms ease, transform 80ms ease;
}
.esc-taste:hover { opacity: 1; color: var(--akzent); border-color: var(--gold); }
.esc-taste:active { transform: translateY(2px); border-bottom-width: 1px; }
@media (max-width: 639px) {
  .esc-taste { top: calc(0.4rem + env(safe-area-inset-top)); left: 0.4rem; }
}