/* Project Medusa – vierter Oberflächenstil «Mac»: wie eine native Anwendung auf macOS 27. Greift nur bei . Grundlage sind die Systemfarben, die AppKit auf macOS 27.0 (Build 26A428) liefert – ausgelesen über NSColor in sRGB, nicht geschätzt –, die Masse der Standardknöpfe (24 px regulär, Schrift 13 pt) und die Regeln der Human Interface Guidelines zu Liquid Glass: Glas trägt nur die Bedienebene (Menüleiste, Leisten, Paletten, Menüs, Dialoge), die Inhaltsebene bleibt ruhig und deckend. Hell und dunkel über light-dark() wie figma.css und studio.css. */ :root[data-stil="mac"]{ /* Graustufen aus den Systemfarben: windowBackground, underPageBackground, label, separator, systemGray. Hell steht links, dunkel rechts. */ --g25: light-dark(#ffffff, #1e1e1e); /* controlBackgroundColor */ --g50: light-dark(#fafafa, #232323); --g75: light-dark(#f6f6f6, #282828); /* underPageBackgroundColor */ --g100: light-dark(#ececec, #2e2e2e); /* Fläche der stillen Knöpfe und Felder */ --g200: light-dark(#e6e6e6, #343434); /* separatorColor, aufgerechnet */ --g300: light-dark(#dadada, #404040); --g400: light-dark(#c7c7c7, #4d4d4d); --g500: light-dark(#aeaeb2, #636366); --g600: light-dark(#8e8e93, #98989d); /* systemGray */ --g700: light-dark(#6e6e73, #aeaeb2); --g800: light-dark(#272727, #e5e5e7); /* labelColor auf der Fläche verrechnet */ --g900: light-dark(#000000, #ffffff); --akz: #007aff; /* controlAccentColor, in beiden Modi gleich */ --akz-hover: light-dark(#0069e0, #2b90ff); --akz-auf: #ffffff; --akz-weich: light-dark(#e8f1ff, #14304f); --akz-tx: light-dark(#0068da, #419cff); /* linkColor */ --akz-linie: light-dark(#a8d0ff, #2b5f95); --auswahl: light-dark(#0064e1, #0059d1); /* selectedContentBackgroundColor */ --ring-farbe: light-dark(#0067f4, #1aa9ff); /* keyboardFocusIndicatorColor */ /* Systemfarben; als Textfarbe auf Hell eine Stufe dunkler, sonst trägt der Kontrast nicht */ --gut: light-dark(#248a3d, #30d158); --gut-weich: light-dark(#e3f7e8, #10301a); --warn: light-dark(#c25100, #ff9230); --warn-weich: light-dark(#fff0e2, #33220c); --schlecht: light-dark(#d70015, #ff4245); --schlecht-weich: light-dark(#ffebeb, #3a1214); /* SF Pro kommt vom System; ausserhalb von macOS die jeweilige Systemschrift */ --f-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI Variable","Segoe UI",sans-serif; --f-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace; --t-mini:11px; --t-klein:12px; --t-basis:13px; --t-gross:17px; --t-h2:26px; --a1:2px; --a2:6px; --a3:10px; --a4:14px; --a5:20px; --a6:26px; --a7:40px; --a8:56px; --a9:80px; /* Konzentrische Ecken: innen + Polsterung = aussen. Knöpfe und Schalter sind Kapseln. */ --r-klein:7px; --r:10px; --r-gross:14px; --r-pille:999px; --kopf-h:52px; --steuer-h:44px; --links-b:252px; --rechts-b:288px; --ui:13px; --h:24px; --ring:0 0 0 3px color-mix(in srgb, var(--ring-farbe) 55%, transparent); --schwebe:0 12px 34px light-dark(rgba(0,0,0,.18), rgba(0,0,0,.55)), 0 0 0 .5px light-dark(rgba(0,0,0,.14), rgba(255,255,255,.14)); --schatten-schwebe:var(--schwebe); --tempo:180ms; --kurve:cubic-bezier(.32,.72,0,1); /* Liquid Glass: durchscheinende Fläche mit Unschärfe und kräftigerer Farbe dahinter. Die regulare Variante – nicht die klare –, weil hier überall Text darauf steht. */ --glas: light-dark(rgba(255,255,255,.72), rgba(40,40,40,.72)); --glas-tief: light-dark(rgba(246,246,246,.86), rgba(30,30,30,.86)); --glas-rand: light-dark(rgba(0,0,0,.08), rgba(255,255,255,.10)); --glanz: inset 0 1px 0 light-dark(rgba(255,255,255,.7), rgba(255,255,255,.07)); --unschaerfe:saturate(180%) blur(30px); } :root[data-stil="mac"] body{line-height:1.35;-webkit-font-smoothing:antialiased;letter-spacing:-.003em} :root[data-stil="mac"] body.editor h1, :root[data-stil="mac"] body.editor h2, :root[data-stil="mac"] body.editor h3{font-weight:590;letter-spacing:-.01em} :root[data-stil="mac"] :focus-visible{outline:0;box-shadow:var(--ring)} :root[data-stil="mac"] html{scrollbar-width:thin;scrollbar-color:var(--g500) transparent} :root[data-stil="mac"] ::selection{background:color-mix(in srgb, var(--auswahl) 30%, transparent)} /* ── Bedienebene aus Glas ───────────────────────────────────────────────────── Kopf, Leisten, Paletten und Menüs schweben über dem Inhalt; die Leinwand nicht. */ :root[data-stil="mac"] .kopf, :root[data-stil="mac"] .steuerleiste, :root[data-stil="mac"] .leistenreiter{ background:var(--glas);backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe); border-bottom:1px solid var(--glas-rand)} :root[data-stil="mac"] .kopf{box-shadow:var(--glanz)} :root[data-stil="mac"] .dock{background:var(--glas-tief);backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe)} :root[data-stil="mac"] .dock--links{border-right:1px solid var(--glas-rand)} :root[data-stil="mac"] .dock--rechts{border-left:1px solid var(--glas-rand)} :root[data-stil="mac"] .dockspalte + .dockspalte, :root[data-stil="mac"] .palette + .palette{border-color:var(--glas-rand)} /* Inhaltsebene: ruhig und deckend, wie es die Richtlinien für Liquid Glass verlangen */ :root[data-stil="mac"] .flaeche{background:light-dark(#e8e8e8,#151515)} :root[data-stil="mac"] .kopf__logo{height:30px;border-radius:var(--r-klein)} :root[data-stil="mac"] .kopf__logo:hover, :root[data-stil="mac"] .kopf__logo[aria-expanded="true"]{background:color-mix(in srgb, var(--g600) 22%, transparent)} :root[data-stil="mac"] .menuleiste__knopf{height:24px;padding:0 9px;border-radius:6px;font-size:13px} :root[data-stil="mac"] .menuleiste__knopf:hover{background:color-mix(in srgb, var(--g600) 18%, transparent)} :root[data-stil="mac"] .menuleiste__knopf[aria-expanded="true"]{background:var(--akz);color:#fff} :root[data-stil="mac"] .kopf__titel input{font-size:13px;font-weight:590!important;height:26px;border-radius:6px} /* Menüs und Popover: Glas, runde Ecken, Zeilen mit Innenabstand wie im System */ :root[data-stil="mac"] .menue, :root[data-stil="mac"] .schwebe{ background:var(--glas);backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe); border:.5px solid var(--glas-rand);border-radius:var(--r);padding:5px;box-shadow:var(--schwebe)} :root[data-stil="mac"] .menue__eintrag{min-height:24px;font-size:13px;border-radius:5px;padding:0 9px} :root[data-stil="mac"] .menue__eintrag:hover:not(:disabled), :root[data-stil="mac"] .menue__eintrag:focus-visible{background:var(--akz);color:#fff;box-shadow:none} :root[data-stil="mac"] .menue__eintrag:hover:not(:disabled) .menue__taste{color:color-mix(in srgb,#fff 80%,transparent)} :root[data-stil="mac"] .menue__taste{font-size:13px} /* ── Knöpfe: Kapseln in allen Grössen, wie AppKit sie seit Liquid Glass zeichnet ── */ :root[data-stil="mac"] .knopf{height:var(--h);min-width:68px;padding:0 14px;font-size:13px;font-weight:400; border-radius:var(--r-pille);border:0;background:var(--akz);color:#fff;box-shadow:none} :root[data-stil="mac"] .knopf:hover{background:var(--akz-hover)} :root[data-stil="mac"] .knopf:active{transform:none;filter:brightness(.92)} :root[data-stil="mac"] .knopf--stumm{background:var(--g100);color:var(--g900)} :root[data-stil="mac"] .knopf--stumm:hover{background:var(--g200)} :root[data-stil="mac"] .knopf--stumm[aria-pressed="true"]{background:var(--akz);color:#fff} :root[data-stil="mac"] .knopf--gefahr{background:var(--schlecht);color:#fff} :root[data-stil="mac"] .knopf:disabled{background:var(--g100);color:var(--g500)} :root[data-stil="mac"] .knopf--klein, :root[data-stil="mac"] .kopfknopf, :root[data-stil="mac"] .pruefknopf{height:var(--h);border-radius:var(--r-pille);font-size:12px} :root[data-stil="mac"] .kopfknopf:hover{background:color-mix(in srgb, var(--g600) 20%, transparent)} :root[data-stil="mac"] .symknopf{border-radius:var(--r-klein)} :root[data-stil="mac"] .symknopf:hover{background:color-mix(in srgb, var(--g600) 20%, transparent)} :root[data-stil="mac"] .symknopf[aria-pressed="true"]{background:var(--akz);color:#fff} :root[data-stil="mac"] .zaehler{font-weight:590} /* ── Felder: weisse Fläche, feiner Rand, runde Ecken, blauer Fokusring ───────── */ :root[data-stil="mac"] .zahl, :root[data-stil="mac"] .textfeld, :root[data-stil="mac"] .auswahlfeld, :root[data-stil="mac"] .farbwahl{background-color:light-dark(#fff,#1a1a1a)!important; border:1px solid var(--g300)!important;border-radius:var(--r-klein)!important; font-size:12px!important;box-shadow:none!important} :root[data-stil="mac"] .zahl:hover, :root[data-stil="mac"] .textfeld:hover, :root[data-stil="mac"] .auswahlfeld:hover, :root[data-stil="mac"] .farbwahl:hover{border-color:var(--g400)!important} :root[data-stil="mac"] .zahl:focus-within, :root[data-stil="mac"] .textfeld:focus, :root[data-stil="mac"] .auswahlfeld:focus{border-color:var(--akz)!important;box-shadow:var(--ring)!important} :root[data-stil="mac"] .zahl__label{font-size:11px;color:var(--tx-3);padding-left:7px} :root[data-stil="mac"] .zahl__einheit{padding-right:7px;font-size:11px} :root[data-stil="mac"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=image]):not([type=submit]):not([type=button]):not([type=reset]), :root[data-stil="mac"] textarea{height:var(--h);font-size:13px;background:light-dark(#fff,#1a1a1a); border:1px solid var(--g300);border-radius:var(--r-klein);padding:0 8px} :root[data-stil="mac"] textarea{height:auto;padding:5px 8px} :root[data-stil="mac"] input:focus, :root[data-stil="mac"] textarea:focus{border-color:var(--akz);box-shadow:var(--ring)} /* Aufklappfeld: Kapsel mit dem doppelten Winkel rechts */ :root[data-stil="mac"] select{height:var(--h);font-size:13px;border:0;border-radius:var(--r-pille); background-color:var(--g100);padding:0 26px 0 11px; background-image:url('data:image/svg+xml;utf8,'); background-position:right 9px center;background-size:8px 14px;background-repeat:no-repeat} :root[data-stil="mac"] select:hover{background-color:var(--g200)} :root[data-stil="mac"] input[type=checkbox], :root[data-stil="mac"] input[type=radio]{accent-color:var(--akz);width:14px;height:14px} /* Regler: dünne Spur, runder Griff mit Schatten */ :root[data-stil="mac"] input[type=range]{height:16px; background:linear-gradient(to right,var(--akz) 0 var(--pct,50%),var(--g300) var(--pct,50%) 100%) 0 6px/100% 4px no-repeat} :root[data-stil="mac"] input[type=range]::-webkit-slider-thumb{width:16px;height:16px;border:0;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3), 0 0 0 .5px rgba(0,0,0,.12)} :root[data-stil="mac"] input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3), 0 0 0 .5px rgba(0,0,0,.12)} /* ── Paletten, Listen, Reiter ────────────────────────────────────────────────── */ :root[data-stil="mac"] .abschnittfeld{padding:var(--a3) var(--a3) var(--a4);border-bottom:1px solid var(--glas-rand)} :root[data-stil="mac"] .abschnittfeld__kopf h3{font-size:11px;font-weight:590;color:var(--tx-3); text-transform:uppercase;letter-spacing:.04em} :root[data-stil="mac"] .listenkopf h3{font-size:11px;font-weight:590;color:var(--tx-3); text-transform:uppercase;letter-spacing:.04em} :root[data-stil="mac"] .feldlabel, :root[data-stil="mac"] .steuerlabel{font-size:11px;color:var(--tx-2)} :root[data-stil="mac"] .leistenreiter{height:38px;gap:2px;padding:0 8px} :root[data-stil="mac"] .leistenreiter button{font-size:12px;padding:0 10px;color:var(--tx-2)} :root[data-stil="mac"] .leistenreiter button[aria-selected="true"]{color:var(--akz-tx);font-weight:590} :root[data-stil="mac"] .leistenreiter button[aria-selected="true"]::after{background:var(--akz);height:2px;border-radius:1px} /* Zeilen der Seiten-, Ebenen- und Formatlisten: gerundet und blau markiert wie im Finder */ :root[data-stil="mac"] .eintrag, :root[data-stil="mac"] .format, :root[data-stil="mac"] .objekt, :root[data-stil="mac"] .farbliste button{font-size:13px;border-radius:6px} :root[data-stil="mac"] .eintrag[aria-current="true"], :root[data-stil="mac"] .objekt[aria-selected="true"], :root[data-stil="mac"] .format[aria-pressed="true"]{background:var(--auswahl);color:#fff} :root[data-stil="mac"] .liste{border-radius:var(--r);border-color:var(--glas-rand)} /* Segmentleiste wie im System: Kapsel, der aktive Teil als weisse Pille darin */ :root[data-stil="mac"] .segmentleiste{background:var(--g100);border:0;border-radius:var(--r-pille);padding:2px;gap:2px} :root[data-stil="mac"] .segmentleiste button{height:calc(var(--h) - 4px);border-radius:var(--r-pille);font-size:12px;color:var(--tx)} :root[data-stil="mac"] .segmentleiste button[aria-pressed="true"], :root[data-stil="mac"] .segmentleiste button[aria-selected="true"]{background:light-dark(#fff,#4a4a4a);color:var(--g900); box-shadow:0 1px 2px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.06)} /* Reiterspalte der Dialoge: die gewählte Zeile blau, wie in den Systemeinstellungen */ :root[data-stil="mac"] .einstellungen__reiter button{font-size:13px;border-radius:6px;padding:5px 10px} :root[data-stil="mac"] .einstellungen__reiter button[aria-selected="true"]{background:var(--auswahl);color:#fff;font-weight:400} /* ── Werkzeugleiste und schwebende Paletten: Glasplatten ─────────────────────── */ :root[data-stil="mac"] .werkzeugleiste-schwebend{padding:5px;border:.5px solid var(--glas-rand);border-radius:var(--r-gross); background:var(--glas);backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe);box-shadow:var(--schwebe)} :root[data-stil="mac"] .werkzeugleiste-schwebend[data-seite="links"]{border-radius:0;box-shadow:none;border-width:0 .5px 0 0} :root[data-stil="mac"] .wz{width:28px;height:28px;border-radius:var(--r-klein);color:var(--tx-2)} :root[data-stil="mac"] .wz:hover{background:color-mix(in srgb, var(--g600) 20%, transparent);color:var(--tx)} :root[data-stil="mac"] .wz[aria-pressed="true"]{background:var(--akz);color:#fff;box-shadow:none} :root[data-stil="mac"] .palette--schwebend{border:.5px solid var(--glas-rand);border-radius:var(--r-gross); background:var(--glas-tief);backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe);box-shadow:var(--schwebe)} /* ── Dialoge: runde Ecken, Titel in der Mitte, Knöpfe rechts unten ───────────── */ :root[data-stil="mac"] dialog.fenster{border:0;border-radius:var(--r-gross); background:var(--glas-tief);backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe); box-shadow:0 24px 64px rgba(0,0,0,.34), 0 0 0 .5px var(--glas-rand)} :root[data-stil="mac"] dialog.fenster::backdrop{background:light-dark(rgba(0,0,0,.18), rgba(0,0,0,.44))} :root[data-stil="mac"] .fenster__kopf{padding:12px 16px 0} :root[data-stil="mac"] .fenster__titel{font-size:13px;font-weight:590} :root[data-stil="mac"] .fenster__koerper{padding:10px 16px;font-size:13px} :root[data-stil="mac"] .fenster__fuss{padding:8px 16px 14px;gap:10px} :root[data-stil="mac"] .schliessen{width:24px;height:24px;border-radius:var(--r-pille);font-size:16px} :root[data-stil="mac"] .meldung{background:var(--glas-tief);color:var(--tx);border-radius:var(--r); backdrop-filter:var(--unschaerfe);-webkit-backdrop-filter:var(--unschaerfe);box-shadow:var(--schwebe)} :root[data-stil="mac"] .meldung .klein, :root[data-stil="mac"] .meldung .leise{color:var(--tx-2)} /* Weniger Transparenz: das Glas wird deckend – wie der Regler in den Systemeinstellungen und wie es die Bedienungshilfen verlangen. */ @media (prefers-reduced-transparency: reduce){ :root[data-stil="mac"]{ --glas:var(--g25); --glas-tief:var(--g50); --glas-rand:light-dark(rgba(0,0,0,.16), rgba(255,255,255,.18)); --unschaerfe:none; } }