/* ═══════════════════════════════════════════════════════════════════════════
   menue.css — gemeinsame Optik der Einstellungs-Menüs
   ═══════════════════════════════════════════════════════════════════════════

   Wofür: Die Reiter im Einstellungs-Panel (Chat · E-Mail · Wissensdatenbank ·
   Diktat-Begriffe · Team · Rückmeldungen) laden je eine eigene Seite in einen
   Rahmen. Jede brachte ihre eigene Grundschrift, eigene Kästen und eigene
   Abstände mit — beim Umschalten sprang die Optik.
   Ralph, 10.09.2026: „Die ganzen Menüs sollen ähnlich aussehen. Ich will nicht,
   dass es ein komplett anderes Style oder Branding oder Schriftarten hat."

   Die Form folgt der Festlegung vom 05.09.2026 („keine separaten Fenster die
   ganze Zeit, außer das Eingabefenster"): im Menü gibt es KEINE Kästen. Der
   Inhalt steht flach auf der weißen Fläche, getrennt durch Abstand und dünne
   Linien; einen sichtbaren Rahmen trägt nur, was man bedient (Eingabefeld,
   Knopf). Das ist zugleich BRANDING.md §4 — keine Rahmen um eingebettete
   Flächen, keine Kästen ineinander.

   Hier steht NUR das Gemeinsame: Schrift, Abstände, Abschnitte, Listenzeilen.
   Knöpfe, Felder, Reiter, Meldungen und Pillen kommen unverändert aus
   brand.css — nichts davon wird hier nachgebaut.

   Einbinden NACH brand.css:
     <link rel="stylesheet" href="/assets/css/brand.css">
     <link rel="stylesheet" href="/assets/css/menue.css">
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Ein Satz Maße für alle Menüs. Wer hier etwas ändert, ändert es überall —
     genau das ist der Zweck. */
  --menue-schrift: 14px;
  --menue-zeile: 1.6;
  --menue-sub: 13px;
  --menue-abschnitt: 22px;   /* Abstand zwischen zwei Abschnitten */
  --menue-linie: 1px solid var(--border-subtle, rgba(15, 15, 30, 0.08));
}

/* ── Grundfläche ──────────────────────────────────────────────────────────
   Eingebettet malt die Seite keinen eigenen Grund und kein eigenes Polster —
   beides gehört dem Panel drumherum. Schrift ist überall Inter (§19a), hier
   wird nur die Größe vereinheitlicht. */
html[data-embed="1"] body,
body.eingebettet {
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: var(--menue-schrift);
  line-height: var(--menue-zeile);
}
html[data-embed="1"] .wrap,
html[data-embed="1"] .huelle,
body.eingebettet .wrap,
body.eingebettet .huelle {
  /* Gedeckelt statt „so breit wie das Fenster" (Ralph, 20.09.2026: „mit dem
     Layout bin ich nicht happy"). Auf einem breiten Bildschirm zog `none` die
     zwei Spalten so weit auseinander, dass links eine halbe Bildschirmbreite
     leer stand und rechts die Einstellungen am Rand klebten. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 12px;
}

/* Die Kopfzeile der Einzelseite bleibt weg: ihren Namen trägt schon der
   Reiter, sonst steht er zweimal untereinander. */
html[data-embed="1"] .topbar,
html[data-embed="1"] .kopf,
body.eingebettet .topbar,
body.eingebettet .kopf { display: none; }

/* ── Abschnitte statt Kästen ──────────────────────────────────────────────
   `.menue-abschnitt` ist der Nachfolger der Karte im Menü: kein Grund, kein
   Rahmen, nur Luft darüber. Bestehende `.karte`-Auszeichnungen werden im
   eingebetteten Zustand genauso behandelt, damit kein Markup umgebaut werden
   muss, das an anderer Stelle als eigene Seite weiterlebt. */
.menue-abschnitt,
html[data-embed="1"] .karte,
body.eingebettet .karte {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.menue-abschnitt + .menue-abschnitt,
html[data-embed="1"] .karte + .karte,
body.eingebettet .karte + .karte {
  margin-top: var(--menue-abschnitt);
  padding-top: var(--menue-abschnitt);
  border-top: var(--menue-linie);
}
.menue-abschnitt-inhalt,
html[data-embed="1"] .karte-inhalt,
body.eingebettet .karte-inhalt {
  padding: 0;
}

/* ── Erklärender Zweittext (BRANDING.md §9) ───────────────────────────────
   Der Titel steht im aktiven Reiter — im Menü folgt nur der erklärende Satz. */
.menue-sub,
.blatt-sub {
  font-size: var(--menue-sub);
  color: var(--text2, var(--text-2, rgba(20, 20, 31, 0.68)));
  margin: 0 0 10px;
}
.menue-sub:last-child,
.blatt-sub:last-child { margin-bottom: 0; }

/* ── Kleine Abschnittsüberschrift ─────────────────────────────────────────
   Zurückhaltend: die Hierarchie trägt der Reiter, nicht eine zweite fette
   Zeile im Menü. */
.menue-titel {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text, #14141d);
}

/* ── Listenzeile ──────────────────────────────────────────────────────────
   Postfächer, Begriffe, gelernte Merkmale: flach, durch eine Linie getrennt.
   Keine Kacheln — sonst sieht jedes Menü wieder anders aus. */
.menue-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: var(--menue-linie);
}
.menue-zeile:last-child { border-bottom: 0; }


/* ── Zwei Spalten: bedienen links, nachlesen rechts ───────────────────────
   Ralph, 10.09.2026: „Mach so, dass links immer die Vorgaberegeln sind und
   rechts die Tipps oder Einstellungen." Die Aufteilung entsteht beim Laden
   (menue-spalten in der Seite), hier steht nur die Optik. Schmale Fenster
   bleiben einspaltig — dort steht das Bedienbare zuerst. */
.menue-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
}
.menue-spalte { min-width: 0; }
/* Rechte Spalte: ruhiger und optisch abgesetzt durch eine feine Linie —
   kein Kasten, sonst ist es wieder ein Fenster im Fenster. */
.menue-spalte--rechts {
  padding-left: 24px;
  border-left: var(--menue-linie);
}
.menue-spalte--rechts > * + * { margin-top: var(--menue-abschnitt); }
/* In der Spalte trennt schon die Reihenfolge — keine zusaetzlichen Linien
   zwischen den Abschnitten. Die Auszeichnung ist bewusst so spezifisch wie die
   allgemeine Regel oben: mit nur `.menue-spalte .karte + .karte` gewann der
   `html[data-embed="1"]`-Selektor, und in der rechten Spalte stand wieder eine
   Linie (Ralph, 14.09.2026: „rechts oben eine leere Zeile mit Trennstrich"). */
html[data-embed="1"] .menue-spalte .karte + .karte,
body.eingebettet .menue-spalte .karte + .karte,
.menue-spalte .karte + .karte {
  margin-top: var(--menue-abschnitt);
  padding-top: 0;
  border-top: 0;
}

/* Ein ausgeblendeter Abschnitt bleibt im Dokument stehen — `+` trifft ihn
   trotzdem. Ohne diese Regel bekam der NACHFOLGER Linie und Polster fuer einen
   Vorgaenger, den niemand sieht: genau der leere Streifen mit Trennstrich. */
html[data-embed="1"] .karte[hidden] + .karte,
body.eingebettet .karte[hidden] + .karte,
.menue-abschnitt[hidden] + .menue-abschnitt {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* ── Zeilen-Liste (.regel) ────────────────────────────────────────────────
 Eine Sache je Zeile: Schalter, Text, Beschriftung, Loeschen. Dieselbe Form
 fuer die Vorgaben (Chat · E-Mail · Wissensdatenbank) und fuer die
 Diktat-Begriffe (Ralph, 20.09.2026: „dass diese Einstellungen auch so
 aussehen wie bei E-Mail und Chat"). Der Text ist ein Feld, kein Absatz —
 geaendert wird an Ort und Stelle, gespeichert wird sofort.
 ═══════════════════════════════════════════════════════════════════════════ */
.regelliste { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.6rem; }
.regelliste:empty { margin-bottom: 0; }
.regel { display: flex; align-items: center; gap: 0.55rem; }
.regel input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex: none; }
.regel-text {
  /* Mindestbreite: in der schmalen linken Spalte schrumpfte das Feld sonst
     auf wenige Zeichen, weil Wirkung und Zuordnung daneben nicht umbrechen. */
  flex: 1 1 55%; min-width: 9rem;
  font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--text);
  background: var(--surface2, rgba(127,127,127,0.08));
  border: 1px solid transparent; border-radius: 7px; padding: 0.4rem 0.55rem;
  /* Zugeklappt: genau eine Zeile, kein Rollbalken, keine Ziehecke. */
  resize: none; overflow: hidden; white-space: nowrap;
  /* min-height ueberschreibt die allgemeine textarea-Regel dieser Seite
     (150 px) — sonst waere jede Regel-Zeile ein Block. */
  height: 2.15rem; min-height: 0; display: block;
}
/* Aufgeklappt (angeklickt): ganzer Text sichtbar. Die volle Breite bekommt
   das Feld nur, wenn der Text mehr als eine Zeile braucht (.ist-breit) —
   sonst bleibt alles in einer Zeile stehen. */
.regel-text.ist-offen { white-space: pre-wrap; overflow-y: auto; }
.regel.ist-breit { flex-wrap: wrap; row-gap: 0.35rem; }
.regel.ist-breit .regel-text.ist-offen { flex-basis: calc(100% - 2.1rem); }
.regel-text:hover { border-color: var(--border); }
.regel-text:focus { outline: none; border-color: var(--accent2, #7c5cff); background: var(--surface); }
.regel.ist-aus .regel-text { opacity: 0.45; text-decoration: line-through; }
.regel-herkunft { font-size: 11px; color: var(--text3); white-space: nowrap; }
/* Leise Zeile unter der Regel-Liste: Angebote, keine Hauptaktionen. */
.unterzeile { display: flex; align-items: center; gap: 0.15rem 0.9rem; flex-wrap: wrap; margin-top: 0.6rem; }
.unterzeile > button[hidden] { display: none; }
.stil-weg-link {
  font: inherit; font-size: 12px; color: var(--text3); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline;
}
.stil-weg-link:hover { color: #c0392b; }
.regel-wirkung {
  font-size: 11px; color: var(--text3); white-space: nowrap;
  max-width: 40%; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.5rem;
}
/* Fest durchgesetzt vs. nur angewiesen — der Unterschied gehoert sichtbar. */
.regel-wirkung.ist-hart { color: var(--accent2, #7c5cff); border-color: currentColor; }
.regel-wo {
  flex: 0 0 auto; font-size: 0.78rem; padding: 0.2rem 0.4rem; border-radius: 8px;
  border: 1px solid var(--line, #e5e7eb); background: var(--surface, #fff); color: var(--muted, #6b7280);
}
.regel.ist-aus .regel-wirkung { opacity: 0.4; }
.regel-weg {
  flex: none; width: 26px; height: 26px; line-height: 1;
  border: 0; border-radius: 6px; background: none; color: var(--text3);
  font-size: 17px; cursor: pointer;
}
.regel-weg:hover { background: rgba(200,60,60,0.12); color: #c0392b; }

/* ── Klappliste (.falt) ───────────────────────────────────────────────────
   Ralph, 20.09.2026 („zu viel Text, zu viele Buttons, konsolidieren"): In der
   rechten Spalte steht pro Thema EINE Zeile — links der Titel, rechts der Stand
   („2 verbunden", „93 Mails gelernt"). Aufgeklappt wird, was man gerade
   braucht. Keine Kästen, keine Trennstriche: die Zeilen trennt der Abstand.

     <details class="falt">
       <summary>Postfächer<span class="falt-stand">2 verbunden</span></summary>
       <div class="falt-inhalt">…</div>
     </details>
   ═══════════════════════════════════════════════════════════════════════════ */
.falt + .falt { margin-top: 0.15rem; }
/* Erste Klappzeile direkt unter der Spalten-Ueberschrift: derselbe Abstand wie
   links zwischen Ueberschrift und erster Zeile (10 px), nicht der grosse
   Abschnitts-Abstand. */
.menue-spalte--rechts > .blatt-sub + .falt,
.menue-spalte--rechts > .menue-sub + .falt,
.menue-spalte--rechts > .a4h-sub + .falt { margin-top: 10px; }
.falt > summary {
  display: flex; align-items: center; gap: 0.45rem; cursor: pointer;
  /* Polster so gewaehlt, dass eine Klappzeile genauso hoch ist wie eine
     Regel-Zeile in der linken Spalte — dann fluchtet die erste Zeile beider
     Spalten (Ralph, 20.09.2026: „alles in einer Linie"). */
  list-style: none; padding: 0.475rem 0; min-height: 36px;
  font-size: 13px; font-weight: 700; color: var(--text, #14141d);
  /* Ein Klick auf die Zeile soll aufklappen, nicht den Titel markieren. */
  user-select: none; outline: none;
}
.falt > summary::-webkit-details-marker { display: none; }
.falt > summary::before { content: '▸'; font-size: 10px; opacity: 0.5; width: 9px; }
.falt[open] > summary::before { content: '▾'; }
.falt > summary:hover { color: var(--accent2, var(--accent, #5b54e8)); }
/* Kein Rahmen um die Klappzeile (Ralph, 20.09.2026: „mach diesen gruenen
   Rahmen weg") — er blieb nach jedem Klick stehen und sah aus wie ein
   ausgewaehlter Kasten. Der Tastatur-Fokus bleibt erkennbar: die Zeile faerbt
   sich wie beim Ueberfahren. */
.falt > summary:focus { outline: none; }
.falt > summary:focus-visible { color: var(--accent2, var(--accent, #5b54e8)); }
.falt-stand {
  margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text3, rgba(20,20,31,.48));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%;
}
.falt-inhalt { padding: 0 0 1rem; }
/* Blocksatz im Klapp-Inhalt (Ralph, 20.09.2026: „ueberall Blocksatz, buendig
   mit dem vertikalen Trennstrich") — gilt fuer Fliesstext und Listeneintraege,
   nicht fuer Zeilen mit rechts stehendem Stand. */
.falt-inhalt p, .falt-inhalt li { text-align: justify; }
.falt ol.falt-inhalt { padding-left: 1.2rem; }
.falt li { font-size: 13px; color: var(--text2, rgba(20,20,29,.66)); margin-bottom: 0.2rem; }
.falt li b { color: var(--text, #14141d); font-weight: 600; }
.falt .fuss { font-size: 12px; color: var(--text3, rgba(20,20,31,.48)); margin: 0.5rem 0 1rem; }

@media (max-width: 900px) {
  .menue-spalten { grid-template-columns: minmax(0, 1fr); row-gap: var(--menue-abschnitt); }
  .menue-spalte--rechts { padding-left: 0; border-left: 0; padding-top: var(--menue-abschnitt); border-top: var(--menue-linie); }
}

/* ── Eingabefelder im hellen Menue: weiss, nicht grau ──────────────────────
   Wunsch Ralph (20.09.2026): "alle Eingabefelder in den Einstellungen in
   weiss statt grau". Zentral hier, weil genau die vier Menue-Seiten diese
   Datei laden (vorgaben, diktat-begriffe, team, operator-mailbox). Der
   Schalter `--input-bg` ist derselbe, den brand.css fuer `.a4h-field` und
   `.a4h-search` auswertet — dadurch zieht eine Zeile alle Felder mit.
   Dunkel bleibt unveraendert: dort wuerde ein weisses Feld blenden. */
:root[data-theme="light"] {
  --input-bg: #ffffff;
}
/* Weisses Feld auf weisser Karte braucht eine sichtbare Kante, sonst
   verschwindet die Feldgrenze. */
:root[data-theme="light"] .regel-text {
  background: var(--input-bg, #ffffff);
  border-color: var(--border, rgba(15,15,30,0.12));
}
:root[data-theme="light"] .neu-feld {
  background: var(--input-bg, #ffffff);
}