/* ══════════════════════════════════════════════════════════════════════ MAC · Glas wie Apple (M9, seit 25.10.2026, docs/plan-desktop-mac.md) ────────────────────────────────────────────────────────────────────── Vincent: „Glas: so wie Apple es macht. Damit es sich nahtlos in die Umgebung passt.“ Also wie macOS Sequoia und Tahoe (Variante B im Plan): Material, also Unschärfe mit durchscheinender Farbe, liegt auf der Ebene der Navigation: Seitenleiste, Symbolleiste, Menüs, Popover, Blätter und Meldungen. Seit 26.10.2026 scheint auch der Inhalt durch (Vincent: „bei dem Liquid-Glas-Design fehlt die Transparenz in der geöffneten Ansicht“): Das HAUS28-Foto liegt einmal leicht weichgezeichnet hinter der Ansicht, die Karten sind halbdurchsichtig ohne eigenen Weichzeichner (Abschnitt 3). Seit 27.10.2026 in den Farben der klassischen Ansicht: Waldgrün statt Systemblau, grün-schwarz statt Apple-Grau (Abschnitt 2). Regeln dieser Datei: - Jede Regel beginnt mit html.mac (mac-frueh.js setzt die Klasse ab 1200 px mit Maus oder Trackpad, nie für buchhalter). Am iPhone (html.hh), am iPad, in der klassischen Ansicht, auf der Anmeldung und im Mitarbeiter-Portal greift nichts (farbwelten-mac.test.js). - Alles in @media screen: Gedruckt wird, wie es war. - Keine eigene Bilddatei: dasselbe img/farbwelt-glas.jpg wie die Anmeldung, das Portal und die iPhone-Hülle. - Spezifität: farbwelten.css setzt die Tokens mit :root[data-skin] (0,2,0), dunkel (0,3,0). html.mac[data-skin] (0,2,1) und dunkel (0,3,1) gehen vor. Die Milchglas-Liste in farbwelten-rahmen.css trägt #toast in ihrem :is() und wiegt deshalb (1,2,0); wer sie aufhebt, braucht selbst eine ID (#hauptinhalt bzw. :not(#toast)). - Hell/Dunkel folgt am Mac dem System, solange der Mond nichts festgelegt hat (mac-frueh.js, sarfi-theme). Die Browserleiste und das Fenster der Web-App im Dock nehmen --bg (theme-color in index.html, faerbeBrowserleiste in farbwelten.js, dashboard.webmanifest). ══════════════════════════════════════════════════════════════════════ */ @media screen { /* ══ 1 · Akzent in den Welten nach Apple-Art ══════════════════════════ Die Auswahl in Seitenleiste und Menüs ist eine Fläche im Akzent mit weißer Schrift, wie in den Systemeinstellungen. Klarheit und Gruppen sind blau bzw. werden es, Glas ist seit 27.10.2026 waldgrün (Abschnitt 2); die Bühne bleibt schwarz-weiß, das ist ihr Charakter. Hell genügt --brand selbst (Weiß darauf 4,9–7,6:1). Dunkel ist --brand ein heller Ton, damit es als Schrift auf den Karten lesbar bleibt (4,9–6,2:1); Weiß darauf hätte nur 2,9:1. Für die Flächen gibt es deshalb einen tieferen (Weiß darauf 4,9:1, in Glas 5,7:1). */ html.mac:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) { --mac-auswahl: var(--brand); --mac-auswahl-hover: var(--brand-hover); --mac-auswahl-ink: var(--brand-ink); } html.mac:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"])[data-theme="dark"] { --mac-auswahl: #0a6ee0; --mac-auswahl-hover: #2a80ea; --mac-auswahl-ink: #ffffff; } /* Flächen mit Schrift darauf nehmen die Auswahlfarbe. Über die Tokens am Element selbst, nicht über background: So gilt jede Regel der Bauteile weiter (Hover, gesperrt, Fokusring), und keine Spezifität muss sich mit ihnen messen. --blue steht in styles.css auf --brand; mehrere Knöpfe setzen Weiß fest darauf. Die Liste sind alle Stellen aus styles.css und den Mac-Dateien mit Schrift auf --brand oder --blue. Ausgenommen sind die Schalter, die mac-optik.css getönt zeigt (Zeitraum der API-Kosten, Schein 1 · 2 · 3): Dort ist --brand Schrift auf --brand-soft, das tiefe Blau stand darauf bei 2,7:1. */ html.mac:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="glas"]) :is(.btn-primary:not([data-api-tage], [data-mw="schein"]), .skip-link, .wb-key-num, .pb-chip.aktiv, .todo-statusbtn.active, .todo-filter .tfbtn.active, .er-badge, .er-btn-apply, .btn-umbau-save, .btn-mieter-save, .blog-step-num, .sa-num, .mac-sl-zeile[aria-current="page"], .mac-sl-zeile[aria-current="page"] + .mac-sl-klapp, .mac-sl-kachel, .mac-menue-eintrag, .mac-su-zeile[aria-selected="true"]) { --brand: var(--mac-auswahl); --brand-hover: var(--mac-auswahl-hover); --brand-ink: var(--mac-auswahl-ink); --blue: var(--mac-auswahl); } /* Leise Schrift und Akzent als Schrift in Klarheit, Gruppen und Bühne hell (Prüfstand, alle Reiter): #6e6e73/#6c6c70 stand auf den Innenflächen (#ececf0, #e8e8ed, #e5e5ea, #e2e2e7) bei 3,9–4,3:1, etwa „HAUS28“ und „seit 45 T.“ in der Liste des Bretts, „Besorgt“ in der Bühne (4,27:1). #636366 hält auf jeder Fläche der drei Welten 4,6:1 und mehr. Das Blau #0a6ee0 als Schrift auf --brand-soft („angenommen“ in Aufträgen, „im Haus“ im Meldewesen) hatte 4,2:1; #005fd8 wie in Glas hat 5,0:1, Weiß darauf 5,8:1. Dunkel lag alles schon darüber. */ html.mac:is([data-skin="klarheit"], [data-skin="gruppen"], [data-skin="buehne"]):not([data-theme="dark"]) { --text-muted: #636366; --text-subtle: #636366; } html.mac:is([data-skin="klarheit"], [data-skin="gruppen"]):not([data-theme="dark"]) { --brand: #005fd8; --brand-hover: #004fb8; } /* Blätter und Menüs halten den Fokus selbst (bedienung.js, tabindex -1) und tragen am Mac keinen Ring; ihre Zeilen und Felder zeigen ihn. Der eine Fokusring aus mac-optik.css (0,3,2) schlug sonst das outline: none aus bedienung.css (0,3,1), und um das ganze Blatt lag ein blauer Rand. */ html.mac:root :is(.modal, .mac-menue):focus-visible { outline: none; } /* ══ 2 · Glas: Tokens ═════════════════════════════════════════════════ Seit 27.10.2026 mit dem Charakter der klassischen Ansicht: Vincent fand sie „irgendwie moderner“, die Mac-Ansicht wirkte mit Apple-Grau und Systemblau wie ein Dienstprogramm. Jetzt SARFI-Farben wie in farbwelten.css: Waldgrün als Akzent (hell #1f5f3f, dunkel als Schrift ein helles Grün, als Fläche mit weißer Schrift #2b7350), grün-schwarzer Grund #0b130e, Schrift mit einem Hauch Grün, runde Karten (22 px wie die Seitenleiste) mit weichem Schatten. Hell bleibt --bg #f5f5f7: daran hängt die theme_color des Manifests, das jedes Gerät liest. Deckende Flächen (Blätter, Popover, Menüs, Knöpfe, Felder) gemessen gegen jeden Grund (Seite, Karte, beide Innenflächen): Schrift 10:1 und mehr, leise Schrift und Akzent 4,5:1 und mehr; farbwelten-mac.test.js rechnet nach, ebenso alles über dem Foto (Abschnitt 3). */ html.mac[data-skin="glas"] { --bg: #f5f5f7; --bg-sunken: #ececf0; --bg-card: #ffffff; --bg-card2: #f2f2f5; --bg-card3: #e8e8ed; --border: #e1e5e2; --border-strong: #cdd3cf; --text: #12201a; --brand: #1f5f3f; --brand-hover: #174a31; --brand-ink: #ffffff; --brand-soft: #e3eee7; --brand-softer: #f1f6f3; --brand-line: #b6d0c0; --gold: #8a6c1c; --rail-bg: rgba(250,252,250,.45); --rail-bg-2: rgba(18,32,26,.07); --rail-line: rgba(18,32,26,.08); --rail-ink: #12201a; --rail-ink-dim: #33413a; --rail-active: #1f5f3f; --viz-grid: #e6e9e7; --viz-axis: #cdd3cf; --viz-label: #4f5b55; --viz-track: #eaedeb; --shadow-xs: 0 1px 2px rgba(18,32,26,.06); --shadow: 0 6px 20px rgba(18,32,26,.08), 0 1px 2px rgba(18,32,26,.05); --shadow-md: 0 10px 28px rgba(18,32,26,.12), 0 1px 3px rgba(18,32,26,.06); --shadow-lg: 0 12px 32px rgba(18,32,26,.16), 0 1px 3px rgba(18,32,26,.08); --tooltip-grund: #ffffff; --radius: 22px; --fw-link: var(--brand); --fw-ring: var(--brand); /* Material: Leisten und Menüs lassen den Inhalt durchscheinen, Blätter nicht (darauf steht viel leise Schrift; bei 95 % schimmerten die Karten des Bretts durch, Abschlussprüfung Runde 2). */ --mac-leiste: color-mix(in srgb, var(--bg) 80%, transparent); --mac-material: color-mix(in srgb, var(--bg-card) 86%, transparent); --mac-kante: rgba(18,32,26,.10); --mac-glas-schatten: 0 8px 24px rgba(18,32,26,.08), 0 1px 2px rgba(18,32,26,.05); /* Glas im Inhalt (Abschnitt 3): Tönung des Fotos (oben am leichtesten, wie der Schleier der klassischen Ansicht), Füllung der Karten, Lichtkante oben. */ --mac-seite-toenung: linear-gradient(180deg, rgba(240,244,241,.70) 0%, rgba(240,244,241,.76) 45%, rgba(240,244,241,.86) 100%); --mac-karte: rgba(255,255,255,.62); --mac-glanz: rgba(255,255,255,.60); /* Höchstens eine Glasschicht (Abschnitt 3a): die Gruppe leiser als die Karte, Innenflächen dichteres Glas derselben Tönung. */ --mac-gruppe: rgba(255,255,255,.22); --mac-innen: rgba(255,255,255,.32); /* Leise Schrift: so tief, dass sie direkt auf dem Foto an seiner dunkelsten Stelle noch 4,5:1 hält (Abschnitt 3). */ --text-muted: #36423b; --text-subtle: #36423b; /* Status als Schrift auf getönten Plaketten und Ampeln über der halbdurchsichtigen Karte (Abschnitt 3a, Nachprüfung): einen Ton tiefer. */ --warn-ink: #7d5105; --crit-ink: #9c1b1b; --good-ink: #046215; /* „bald fällig“ an der Brett-Karte: auf rot getönter Karte hielt das Orange aus styles.css (#9c4416) im strengen Modell 4,44:1. */ --serious-ink: #8f3c12; --rail-w: 256px; color-scheme: light; } html.mac[data-skin="glas"][data-theme="dark"] { --bg: #0b130e; --bg-sunken: #070c09; --bg-card: #151d18; --bg-card2: #1d2620; --bg-card3: #27312a; --border: #2a342d; --border-strong: #3f4b43; --text: #f5f7f5; --brand-ink: #06140c; --brand-soft: #173a27; --brand-softer: #112d1e; --brand-line: #2b5a40; --gold: #e0b552; --rail-bg: rgba(8,14,10,.30); --rail-bg-2: rgba(255,255,255,.12); --rail-line: rgba(255,255,255,.10); --rail-ink: #ffffff; --rail-ink-dim: #cdd5cf; --rail-active: #2b7350; --viz-grid: #1d2620; --viz-axis: #27312a; --viz-label: #a7b0aa; --viz-track: #1d2620; --shadow-xs: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 8px 24px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 12px 32px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.24); --shadow-lg: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); --tooltip-grund: #18211b; --mac-kante: rgba(255,255,255,.12); --mac-glas-schatten: 0 8px 24px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.2); --mac-seite-toenung: linear-gradient(180deg, rgba(8,14,10,.60) 0%, rgba(8,14,10,.66) 45%, rgba(8,14,10,.80) 100%); --mac-karte: rgba(16,22,18,.60); --mac-glanz: rgba(255,255,255,.08); --mac-gruppe: rgba(8,14,10,.22); --mac-innen: rgba(0,0,0,.16); /* Gemessen an der hellsten Stelle des Fotos (Abschnitt 3): leise Schrift wie das Weiß zu 80 % der klassischen Ansicht, Akzent ein helles Grün. */ --text-muted: #ccd4ce; --text-subtle: #ccd4ce; --brand: #8fd6a9; --brand-hover: #aee2c1; /* --serious-ink wie styles.css: Der helle Block gilt auch im Dunkeln. */ --warn-ink: #f5c25a; --crit-ink: #f7a8a8; --good-ink: #62d466; --serious-ink: #f0a077; /* Flächen mit Schrift (Auswahl der Seitenleiste, Hauptknopf): Waldgrün mit Weiß (5,7:1). Gilt nach der Regel für alle Welten (Abschnitt 1). */ --mac-auswahl: #2b7350; --mac-auswahl-hover: #2f7a55; --mac-auswahl-ink: #ffffff; color-scheme: dark; } /* ══ 3 · Inhalt: Glas über dem weichen Foto ═══════════════════════════ Vincent, 26.10.2026: „Bei dem Liquid-Glas-Design fehlt die Transparenz in der jeweils geöffneten Ansicht.“ Bis dahin war der Inhalt deckend. Jetzt liegt das HAUS28-Foto wie in der Seitenleiste weichgezeichnet und getönt hinter der ganzen Ansicht, die Karten scheinen durch. Teuer war früher die Unschärfe je Karte: 23 Milchglas-Ebenen auf Heute, jede rechnet beim Scrollen neu. Hier wird das Foto EINMAL als feste Ebene weichgezeichnet (body::before, filter statt backdrop-filter), und die Karten sind nur halbdurchsichtig gefüllt, ohne eigenen Weichzeichner. Das sieht aus wie Glas, kostet aber nichts beim Scrollen. Seit 27.10.2026 wie in der klassischen Ansicht ein erkennbares Haus: Weichzeichner 8 statt 40 px, Tönung im Grün-Schwarz bzw. Grün-Weiß des klassischen Schleiers, oben am leichtesten. Bei 40 px war das Foto nur noch ein braun-oliver Fleck, und Glas über einem verwaschenen Bild sah aus wie flaches Grau. Die Ebene ragt 24 px über das Fenster (drei Radien), damit ihr Rand nicht ausbleicht. Lesbarkeit (Mischung im sRGB-Raum, farbwelten-mac.test.js rechnet nach): Das Foto nach blur(8px) saturate(1.3) reicht am Prüfstand bei 1200×900 bis 1920×1080 von #181916 bis #dbc093 (die sonnige Holzfassade, Leuchtdichte 0,55). Gerechnet wird mit der leichtesten Stelle der Tönung, also strenger als am Bildschirm. - dunkel: Tönung ab 60 % → Seite höchstens #5c5541 (gemessen hellste Stelle #4a5155, der Himmel oben); leise Schrift #ccd4ce darauf 4,9:1 (gemessen 5,3:1), auf den Karten (60 % Füllung) 9,0:1. Die Dämpfung der Bildmitte (26.10.2026) braucht es nicht mehr. - hell: Tönung ab 70 % → Seite mindestens #afb2af (gemessen #b1b6b0); leise Schrift #36423b darauf 4,9:1 (gemessen 5,1:1), auf den Karten (62 % Weiß) 8,1:1. Menüs und Listen im Inhalt (role=menu/listbox) bleiben deckend; Blätter, Popover und Menüs der Mac-Schicht hängen ohnehin außerhalb von #hauptinhalt. Die Schleier-Regel der Arbeitsreiter in farbwelten-rahmen.css (:root[data-skin="glas"]:not(:has(#tab-uebersicht .active)), dort 88 % dunkel und 90 % hell) wiegt (1,3,2); :not(#mac-glas) allein wog nur (1,2,3), und bis zum 26.10.2026 lag auf jedem Reiter außer Heute der dichte Schleier (Abschnitt 3a). Die zweite Zeile wiegt (1,3,3) und gibt den Arbeitsreitern dieselbe Tönung wie Heute. */ html.mac[data-skin="glas"]:not(#mac-glas) body::before, html.mac[data-skin="glas"]:not(:has(#tab-uebersicht.active)) body::before { content: ""; position: fixed; inset: -24px; z-index: -1; background: var(--mac-seite-toenung), url("img/farbwelt-glas.jpg") center 40% / cover no-repeat; filter: blur(8px) saturate(1.3); pointer-events: none; } html.mac[data-skin="glas"] { /* hier aufgelöst: deckend, für Menüs, Knöpfe und Felder im Inhalt */ --mac-karte-deckend: var(--bg-card); --mac-innen-deckend: var(--bg-card2); --mac-grund-deckend: var(--bg); --mac-mulde-deckend: var(--bg-sunken); } html.mac[data-skin="glas"] #hauptinhalt { --bg-card: var(--mac-karte); } html.mac[data-skin="glas"] #hauptinhalt :is([role="menu"], [role="listbox"]) { --bg-card: var(--mac-karte-deckend); } /* „Jetzt dran“ nimmt sonst die deckende Tooltip-Fläche (mac-heute.css). */ html.mac[data-skin="glas"] #hauptinhalt .mac-jetzt { background: var(--bg-card); box-shadow: var(--shadow), inset 0 1px 0 var(--mac-glanz); } html.mac[data-skin="glas"] #hauptinhalt :is(.metric-card, .kpi-karte, .checkin-kachel, .vorausschau-kachel, .t5-card, .todo-heute-card, .ge-card, .m-coll-head.klapp, .gewinn-uebersicht, .unit-card, .pb-spalte), html.mac[data-skin="glas"] .todo-quickadd input { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow), inset 0 1px 0 var(--mac-glanz); } /* Was auf deckendem Grund unter 4,5:1 fiel (Prüfstand, alle Reiter): - Fest- und Umbau-Karten der Einheiten standen bei Deckkraft .85/.75, ihre Beschriftung bei 3,3–4,1:1. Die Kante oben und die Plakette „Festmiete“/„Im Umbau“ sagen, was sie sind. - Status „Gesendet“ in Kommunikation: festes #2563eb, in Glas dunkel 2,9:1, in Klarheit und Gruppen 3,1:1. Deshalb in jeder Welt. - Aktive Status-Knöpfe am Todo: mac-optik.css (Signalfarben im Dunkeln) und mac-ruhe.css (Weiß auf --brand), für alle Welten. */ html.mac[data-skin="glas"] :is(.unit-card-fest, .unit-card-umbau) { opacity: 1; filter: none; } html.mac[data-skin] .komm-status-sent { background: var(--brand-soft); color: var(--brand); } /* ══ 3a · Höchstens eine Glasschicht ══════════════════════════════════ Vincent, 26.10.2026, nach dem ersten Stand: „Allerdings ist auf Heute der Transparenzeffekt viel heller, auf den anderen Tabs ist es fast zu dunkel, also man sieht es nur ganz ganz leicht. Macht es auch so wie auf der Heute-Seite.“ Gemessen am Prüfstand (Deckkraft aller Flächen über dem Foto je Rasterpunkt): Heute 0,45 dunkel und 0,49 hell im Mittel, eine Kartenschicht mit Luft dazwischen. Die anderen Reiter hatten drei Ursachen: - den dichteren Schleier der Arbeitsreiter (Abschnitt 3, Foto), - deckende Innenflächen aus --bg, --bg-card2 und --bg-sunken: die Spalten des Bretts (88 % der Fläche von Todo), Kacheln, Zellen, - Glas auf Glas: Karten in Karten, beide 55 %. Die Regel seitdem: Über dem Foto liegt höchstens eine Glasschicht (--mac-karte). Was nur Karten gruppiert, ist eine leise Gruppe (--mac-gruppe), etwa die Spalten des Bretts. Was in einer Karte liegt, ist dichteres Glas derselben Tönung (--mac-innen): hell weißer, dunkel dunkler, so steht Schrift darauf nie schwächer als auf der Karte. Schrift nach Fläche (farbwelten-mac.test.js rechnet nach, mit dem farbig gemessenen Foto): Auf Karten und Innenflächen steht jede Schrift mit 4,5:1, auch Akzent und Status auf getönten Plaketten. Auf der Gruppe und direkt auf dem Foto stehen Überschriften und leise Schrift; Akzent und Status als Schrift brauchen eine Karte (hell hielte der Akzent auf der Gruppe 3,6:1). Leise Schrift direkt auf dem Foto hält an seiner ungünstigsten Stelle 4,9:1, hell und dunkel (Abschnitt 3). Heute bleibt, wie es ist (.tab-panel:not(#tab-uebersicht)). Deckend wie bisher bleiben Knöpfe, Felder, Menüs, Listen und Diagramme (SVG) sowie die farbigen Status-Flächen, die ihre eigenen Tokens haben. */ html.mac[data-skin="glas"] #hauptinhalt .tab-panel:not(#tab-uebersicht) { --bg: var(--mac-innen); --bg-card2: var(--mac-innen); --bg-sunken: var(--mac-gruppe); } /* Zurück auf die deckenden Werte (aufgelöst am ): Knöpfe, Felder, Menüs und Diagramme wie bisher; .tl-bar-label nimmt --bg als Schrift auf dem Balken der Zeitleiste (mac-optik.css). Die erste Spalte des Kalenders (Einheiten) klebt beim waagrechten Rollen links (position: sticky); durchscheinend lägen die Buchungsbalken der vorbeirollenden Tage sichtbar unter den Namen. Deshalb bleibt sie deckend. */ html.mac[data-skin="glas"] #hauptinhalt .tab-panel:not(#tab-uebersicht) :is(button, .btn, input, select, textarea, svg, [role="menu"], [role="listbox"], .kal-unit-label, .tl-bar-label) { --bg: var(--mac-grund-deckend); --bg-card2: var(--mac-innen-deckend); --bg-sunken: var(--mac-mulde-deckend); } /* Blätter im Inhalt (, etwa „Angaben“ im Meldewesen) liegen über allem und bleiben deckend wie ein Fenster in macOS; was in ihnen durchscheint, liegt dann auf deckendem Grund. */ html.mac[data-skin="glas"] #hauptinhalt dialog { --bg-card: var(--mac-karte-deckend); --bg: var(--mac-grund-deckend); --bg-card2: var(--mac-innen-deckend); --bg-sunken: var(--mac-mulde-deckend); } /* Brett: Spalten gruppieren die Karten. Als Liste ist die Spalte selbst die Karte, ihre Zeilen sind durchsichtig (brett-mac.css). */ html.mac[data-skin="glas"] #hauptinhalt .pb-spalte { box-shadow: none; } html.mac[data-skin="glas"] #hauptinhalt #projekt-brett[data-ansicht="liste"] .pb-spalte { background: var(--bg-card); box-shadow: var(--shadow), inset 0 1px 0 var(--mac-glanz); } /* Glas auf Glas, gefunden per Skript über alle Reiter in Hell und Dunkel, auch aufgeklappt (jede Fläche ab 40 % Deckkraft mit einem Vorfahren ab 40 %, Prüfstand). Wer eigene Schrift trägt, bleibt Karte, und die Karten darin werden Innenfläche, wie die Zeilen einer Gruppe in den macOS-Einstellungen. Zur leisen Gruppe wird nur ein Behälter, auf dem allein eine Überschrift steht: das Portfolio der Revenue-Optimierung. Nachprüfung vom 26.10.2026: Zuerst waren auch die Vorgänge je Buchung, der Revenue-Manager, die Abschreibung je Objekt, der Fundament-Monitor und die Gäste Gruppen. Auf 22 % stand dann leise und farbige Schrift, die vorher auf einer Karte stand („3 Warnung“ 3,7:1, die Summen der Buchhaltungsblöcke 3,9:1). Und :has() sah auch in zugeklappte
: Zahlungseingänge, Payouts und der Fundament-Monitor waren zugeklappt blasse Streifen zwischen gleichartigen Glaskarten. */ html.mac[data-skin="glas"] #hauptinhalt .ro-portfolio-bar { background: var(--mac-gruppe); box-shadow: none; } /* Was in einer Karte liegt (Kacheln, Zeilen, Tabellenrahmen, die Karten der Vorgänge, die Einheiten des Revenue-Managers samt ihren Prüfpunkten, die Objekte in Steuern und Selbstauskunft, der Ernstfall-Rechner im Klappteil, „Je Kanal“ im Ergebnis, die Ampel im Abschnitt Handlungsbedarf), ist Innenfläche. Über das Token: So behält jede Fläche ihren Rand, ihre Rundung und ihre farbige Kante (.ck-kachel.rot, .sa-objekt-card-eigen, .fin-ampel.rot). */ html.mac[data-skin="glas"] #hauptinhalt :is(.ck-karte .ck-kachel, .ck-karte .fin-block, .fin-block .ck-kachel, .fin-block .ck-tabelle-rahmen, .fin-block .ck-karte, .ro-unit .ck-tabelle-rahmen, .rm-karte .rm-unit, .ck-karte .st-objekt, .sa-paper .sa-objekt-card, .fin-block .ka-wrap, #fin-ampel > .fin-ampel, .roi-panel .roi-panel-toggle, .gewinn-uebersicht .fin-block) { --bg-card: var(--mac-innen); } /* Gäste: ein Fenster mit Liste und Verlauf. Die Fläche gibt der Bereich, Liste und Verlauf sind nur durch ihren Rand getrennt wie Seitenleiste und Inhalt einer Mac-App; die Blasen des Gasts sind Innenfläche. */ html.mac[data-skin="glas"] #hauptinhalt .gc.ck-bereich :is(.gc-liste, .gc-gespraech) { background: none; } /* Status-Kacheln und Hinweise, deren Tönung die Fläche ersetzt, stünden sonst mit 6–10 % Farbe direkt auf dem Foto oder dunkelten die Karte unter blauer Schrift ab (Kennzahlen im Betrieb, der Marktdaten-Hinweis der Preise, die Empfehlungen der Zeitleiste, „In Klartext“ im Fundament-Monitor). Dieselbe Tönung liegt jetzt auf der Karte. */ html.mac[data-skin="glas"] #hauptinhalt .ops-kpi-kritisch { background: color-mix(in srgb, rgb(239 68 68) 6%, var(--bg-card)); } html.mac[data-skin="glas"] #hauptinhalt .ops-kpi-warn { background: color-mix(in srgb, rgb(245 158 11) 6%, var(--bg-card)); } html.mac[data-skin="glas"] #hauptinhalt .wb-markt-banner { background: color-mix(in srgb, var(--viz-7) 8%, var(--bg-card)); } html.mac[data-skin="glas"] #hauptinhalt .tl-recom-info { background: color-mix(in srgb, rgb(59 130 246) 10%, var(--bg-card)); } html.mac[data-skin="glas"] #hauptinhalt .fund-klartext { background: color-mix(in srgb, var(--blue) 8%, var(--bg-card)); } /* „Stand … seit N Tagen nicht aktualisiert“ der Preise steht neben dem Titel direkt auf dem Foto; Status als Schrift braucht dort eine Plakette. */ html.mac[data-skin="glas"] #hauptinhalt .pe-stand.veraltet { padding: 0 var(--sp-1); border-radius: var(--r-xs); background: var(--warn-soft); } /* Umgekehrt: Was als Innenfläche gebaut ist, aber ohne Karte direkt auf dem Foto steht, ist selbst die Karte (die Kreditkacheln in Investitionen, der Lücken-Hinweis der Preise, der Absender des Newsletters). Ebenso die Listen, die bisher ohne Fläche auf dem Foto lagen; unter dem dichten Schleier fiel das nicht auf (Mail-Protokoll, Newsletter im Blog). Gefunden per Skript: leise Flächen und Tabellen ohne Glas darunter. */ html.mac[data-skin="glas"] #hauptinhalt :is(#kredit-tracker .kredit-hero-item, .pl-gap-info, #nl-config) { --bg: var(--mac-karte); --bg-card2: var(--mac-karte); } html.mac[data-skin="glas"] #hauptinhalt .komm-table-wrap { background: var(--bg-card); } html.mac[data-skin="glas"] #hauptinhalt #nl-listen:has(table) { padding: var(--sp-2) var(--sp-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 var(--mac-glanz); } /* Die Ringe der Selbstauskunft (Felder belegt) und der Bankbewertung stanzen ihr Loch mit einer Scheibe in --bg-card aus. Halbdurchsichtig schien der Kreis darunter durch, und der Ring sah aus wie eine Torte. */ html.mac[data-skin="glas"] #hauptinhalt :is(.sa-comp-ring, .bk-score-ring) > span { background: var(--mac-karte-deckend); } /* ══ 4 · Seitenleiste: schwebende Glasfläche ══════════════════════════ Wie in macOS 26: abgesetzt vom Fensterrand, rund, mit Schatten. Seit 27.10.2026 echtes Milchglas über dem Foto der Seite wie in der klassischen Ansicht: Das Haus läuft unter der Leiste weiter, statt dass eine eigene Ebene die Bildmitte (die Holzfassade) hineinzieht. Bis dahin war die Leiste zu 86 % gefüllt und lag mit schwerem Schatten da wie eine graue Platte. Eine Unschärfe-Ebene: Die Leiste steht, hinter ihr liegt nur das feste Foto, und ihre Liste rollt darüber. Ihre Tönung kommt zu der der Seite hinzu (dunkel 60 % + 30 %, hell 70 % + 45 %); Schrift und Zähler darauf 6,9:1 und mehr. */ html.mac[data-skin="glas"] .rail { inset: 10px auto 10px 10px; width: 236px; border: 1px solid var(--mac-kante); border-radius: 22px; background: var(--rail-bg); box-shadow: var(--mac-glas-schatten); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); } html.mac[data-skin="glas"] .rail-area { border-radius: var(--r-sm); } /* ══ 5 · Symbolleiste: Material über dem Inhalt ═══════════════════════ Der Inhalt rollt unter der Leiste durch und scheint weich hindurch. Ganz oben, solange nichts unter ihr liegt (mac-sy-oben aus mac-symbolleiste.js), ist die Leiste durchsichtig wie in Musik oder im App Store und in der iPhone-Hülle: Das Foto läuft bis an den Fensterrand, statt unter einem dunklen Band zu beginnen. Bei einer Störung behält sie ihr Material: Der rote Stand hielte direkt auf dem Foto keine 4,5:1 (dunkel 3,9:1, hell 3,8:1; Prüfung). */ html.mac[data-skin="glas"] :is(.topbar, .subnav) { background: var(--mac-leiste); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); border-bottom-color: var(--border); } html.mac[data-skin="glas"] .topbar.mac-sy-oben:not(.mac-sy-stoerung) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } /* ══ 6 · Menüs, Popover, Blätter, Meldungen ═══════════════════════════ Menüs (⋯ der Symbolleiste, „Einstellungen…“, Kontextmenü: alle aus MAC_BEDIENUNG.menue; dazu das ⋯ am Brett) mit sichtbarem Material, Blätter und Popover deckend wie Fenster in macOS. :not(#toast) gibt die ID, die die Milchglas-Liste in farbwelten-rahmen.css schon hat. */ html.mac[data-skin="glas"] :is(.mac-menue, .pb-menue-liste) { background: var(--mac-material); border-color: var(--mac-kante); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px); } html.mac[data-skin="glas"] :is(.modal, .msheet-panel):not(#toast) { background: var(--bg-card); border-color: var(--mac-kante); box-shadow: var(--shadow-lg); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Die Meldung als Glasbanner wie eine Mitteilung; Milchglas nur, solange sie steht (sonst liegt sie unsichtbar bei Deckkraft 0). */ html.mac[data-skin="glas"] #toast { background: var(--mac-material); border-color: var(--mac-kante); border-radius: 14px; box-shadow: var(--shadow-lg); backdrop-filter: none; -webkit-backdrop-filter: none; } html.mac[data-skin="glas"] #toast.show { backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px); } /* Die Kante oben setzt die Kante der Fläche; links bleibt die Farbe der Meldung (styles.css: grün Erfolg, rot Fehler), sonst sah ein Fehler in Glas aus wie ein Erfolg (Abschlussprüfung Runde 2). */ html.mac[data-skin="glas"] #toast.success { border-left-color: var(--good); } html.mac[data-skin="glas"] #toast.error { border-left-color: var(--crit); } } /* @media screen */