/* ══ Mac-Schicht: Symbolleiste (M6a, seit 25.10.2026) ═════════════════════
   Die Kopfleiste als eine Zeile wie in Erinnerungen und den
   Systemeinstellungen: Seitenleisten-Knopf, Titel mit Zeile darunter,
   rechts Symbolknöpfe ohne Rahmen und Füllung. Gebaut in
   mac-symbolleiste.js. Jede Regel hängt an html.mac (mac-frueh.js); am
   iPhone, am iPad, in der klassischen Ansicht und für buchhalter greift hier
   nichts. Nie in styles.css (lib/sa-pdf.js bettet sie ins Bankdokument ein).
   Spezifität: html.mac:root schlägt die Farbwelten (:root:is([data-skin…]),
   0,2,0 bzw. 0,3,0 an der Kopfleiste), die IDs schlagen die Knopfregeln. */

/* Höhe 52 px. --topbar-h trägt die Haftposition der Reiterzeile darunter
   (.subnav in styles.css). Auch in der Bühne: Ihre Leiste liegt am Mac als
   Seitenleiste links (mac-leiste.css, --oben-h: 0), über dem Kopf steht nichts. */
html.mac:root { --topbar-h: 52px; }

html.mac:root .topbar {
  height: 52px;
  min-height: 52px;
  padding-top: 0;
  padding-bottom: 0;
  gap: var(--sp-2);
  align-items: center;
}
/* Der Knopf nah an der Seitenleiste wie bei macOS. Die Bühne behält ihren
   Rand: Dort steht der Inhalt mittig, der Titel bleibt über ihm. */
html.mac:root:not([data-skin="buehne"]) .topbar { padding-left: var(--sp-4); padding-right: var(--sp-4); }

/* Der Bereichsname, „Ziele“ und „Anordnen“ bleiben im DOM: Der Titel kommt
   aus der Seite, die beiden Knöpfe öffnet das ⋯ (mac-symbolleiste.js). */
html.mac #area-title,
html.mac #btn-ziele,
html.mac #btn-anordnen { display: none; }

/* Was die Leiste von einer Seite übernimmt (Forderungen „Jetzt prüfen“,
   Rechnungen „Neue Buchungsänderung“), steht nicht zweimal da. */
html.mac [data-mac-in-leiste] { display: none !important; }
/* Dieselbe Überschrift wie der Titel der Leiste, ohne Knopf und ohne Zeile
   daneben (mac-symbolleiste.js, doppelterTitel). Beim Anordnen bleibt sie. */
/* Nur am Bildschirm: Auf dem Papier steht kein Titel der Leiste. */
@media screen {
html.mac body:not(.kacheln-anordnen) [data-mac-doppelt] { display: none; }
/* Trägt sie eine Erklärzeile, fällt nur der Titel samt Symbol weg, die Zeile
   bleibt (data-mac-nur-unter; der Titeltext steht in .mac-titeltext). */
html.mac body:not(.kacheln-anordnen) [data-mac-nur-unter] > span > :not(.section-subtitle) { display: none; }
html.mac body:not(.kacheln-anordnen) [data-mac-nur-unter] > span > .section-subtitle { margin-left: 0; }
}

/* ── Titel ───────────────────────────────────────────────────────────── */
html.mac .mac-sy-kopf {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin-left: var(--sp-1);
  margin-right: auto;
  line-height: 1.25;
}
html.mac .mac-sy-titel {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.mac .mac-sy-unter {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.mac .mac-sy-unter:empty { display: none; }

/* ── Großer Titel oben im Inhalt (seit 27.10.2026) ──────────────────────
   Wie in Musik, im App Store und in der klassischen Ansicht: das Datum
   darüber, der Titel in 36 px fett, die Zahl der Leiste daneben. Solange er
   zu sehen ist, steht der kleine Titel der Leiste unsichtbar (mac-sy-gross,
   mac-symbolleiste.js); er bleibt dabei die Überschrift für Screenreader.
   Er fluchtet mit dem Inhalt, der höchstens 1200 px breit mittig steht
   (mac-leiste.css). Nicht in der Bühne: Sie hat ihren Gruß über Heute.
   Nur am Bildschirm. */
html.mac .mac-gross { display: none; }
@media screen {
html.mac:not([data-skin="buehne"]) .mac-gross:not([hidden]) {
  display: block;
  max-width: 1200px;
  margin: 0 auto var(--sp-6);
}
html.mac .mac-gross-datum {
  margin: 0 0 2px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  color: var(--text-muted);
}
html.mac .mac-gross-titel {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
}
html.mac .mac-gross-zahl {
  margin-left: var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  color: var(--text-muted);
}
html.mac .topbar.mac-sy-gross .mac-sy-kopf { opacity: 0; pointer-events: none; }
/* Der Gäste-Chat rechnet seine Höhe vom Fenster (gaeste-chat.css), damit das
   Antwortfeld unten stehen bleibt. Der große Titel (84 px mit Abstand) und
   der größere Abschnittskopf schoben ihn 113 px tiefer, bei 907 px stand
   seine Unterkante bei 952 px unter dem Fensterrand; mit 110 px weniger
   steht sie wie vorher bei 839 px (Prüfstand). */
html.mac:not([data-skin="buehne"]) :is(.gc-liste, .gc-gespraech) {
  height: calc(100vh - var(--topbar-h) - var(--subnav-h) - 250px);
}
}

/* ── Symbolknöpfe: 28 px, ohne Rahmen und Füllung ────────────────────────
   ↻ ist der vorhandene #btn-refresh (seine Haken in team.js, meldewesen.js,
   latecheckout.js, steuern.js und gaeste-chat.js laufen mit). Neu laden ist
   kein Hauptschritt: ein Symbolknopf ohne Text, den Namen behält er über
   aria-label und title. Alle Regeln für ↻ stehen hier. */
html.mac .topbar-actions { gap: 2px; }
html.mac .mac-sy-knopf,
html.mac .topbar-actions > #btn-refresh {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  flex: none;
  background: transparent;
  border: 0;
  border-radius: var(--r-xs);
  box-shadow: none;
  color: var(--text-muted);
  cursor: default;
}
html.mac .mac-sy-knopf:hover:not(:disabled),
html.mac .topbar-actions > #btn-refresh:hover:not(:disabled) { background: var(--bg-card2); color: var(--text); }
html.mac .mac-sy-mehr[aria-expanded="true"],
html.mac .mac-sy-knopf:active:not(:disabled),
html.mac .topbar-actions > #btn-refresh:active:not(:disabled) { background: var(--bg-card3); }
html.mac .mac-sy-knopf:focus-visible,
html.mac .topbar-actions > #btn-refresh:focus-visible { outline: none; box-shadow: var(--ring); }
html.mac .mac-sy-knopf:disabled { opacity: .4; }
html.mac .mac-sy-knopf [data-lucide],
html.mac .topbar-actions > #btn-refresh [data-lucide] { width: 17px; height: 17px; stroke-width: 1.75; }
html.mac #btn-refresh > span { display: none; }
/* Die Hauptaktion einer Seite steht wie in Erinnerungen, Notizen und Mail
   grau wie ihre Nachbarn (blaue Leistensymbole sind iOS); sie zeigt sich
   über ihre Stellung links in der Gruppe. */

html.mac .mac-sy-verlauf { display: inline-flex; gap: 2px; }
html.mac .mac-sy-aktionen { display: inline-flex; gap: 2px; }
html.mac .mac-sy-aktionen:empty { display: none; }

/* Stand nur bei einer Störung (rot: Fehler), sonst steht er im Tooltip von
   ↻, auch „wird aktualisiert“ (mac-symbolleiste.js, stoerung). */
html.mac #last-update { display: none; }
html.mac .topbar.mac-sy-stoerung #last-update {
  display: inline;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: var(--sp-2);
  font-size: var(--fs-xs);
}

/* ── Seitenleiste aus ────────────────────────────────────────────────────
   nav.rail bleibt im DOM, der Knopf links holt sie zurück. Kopfleiste,
   Reiterzeile, Inhalt und Kachel-Leiste rücken über --rail-w nach links;
   --oben-h: die Bühne legt die Schiene als Leiste nach oben
   (farbwelten-rahmen.css) und zentriert den Inhalt über margin-inline. */
html.mac.mac-ohne-leiste { --rail-w: 0px !important; --oben-h: 0px !important; }
html.mac.mac-ohne-leiste .rail { display: none !important; }