/* Project Medusa – zweiter Oberflächenstil «Figma»: nüchtern, klar, kompakt. Greift nur bei . Grundlage sind dieselben Variablen wie in base.css/app.css; darunter stehen die wenigen Bauteile, die anders aussehen: Felder als graue Kästchen ohne Rahmen, flache Radien, weisse Paletten, blaue Marke. */ :root[data-stil="figma"]{ /* hell: weisse Paletten auf grauer Bühne · dunkel: Figmas Grautöne */ --g25: light-dark(#ffffff, #2c2c2c); --g50: light-dark(#fcfcfc, #303030); --g75: light-dark(#f5f5f5, #1e1e1e); --g100: light-dark(#f5f5f5, #383838); --g200: light-dark(#e6e6e6, #3d3d3d); --g300: light-dark(#e0e0e0, #444444); --g400: light-dark(#d9d9d9, #525252); --g500: light-dark(#b3b3b3, #6b6b6b); --g600: light-dark(#8c8c8c, #8c8c8c); --g700: light-dark(#757575, #b3b3b3); --g800: light-dark(#333333, #e6e6e6); --g900: light-dark(#1e1e1e, #ffffff); --akz: #0d99ff; --akz-hover: light-dark(#007be5, #3badff); --akz-weich: light-dark(#e5f4ff, #10334d); --akz-tx: light-dark(#007be5, #77c3ff); --akz-linie: light-dark(#99d5ff, #1f5c8a); --auswahl: #0d99ff; --gut: light-dark(#0a8a45, #14ae5c); --warn: light-dark(#b25000, #ffcd29); --schlecht: light-dark(#d32f2f, #f24822); --r-klein:5px; --r:6px; --r-gross:13px; --t-mini:12px; --t-klein:14px; --t-basis:14px; --t-gross:18px; --t-h2:26px; --a1:2px; --a2:6px; --a3:8px; --a4:12px; --a5:20px; --a6:24px; --a7:36px; --a8:48px; --a9:64px; --ring:0 0 0 1px var(--flaeche), 0 0 0 2px var(--ring-farbe); --schwebe:0 2px 6px light-dark(rgba(0,0,0,.14), rgba(0,0,0,.6)), 0 0 0 .5px light-dark(rgba(0,0,0,.10), rgba(0,0,0,.4)); --kopf-h:46px; --steuer-h:56px; --links-b:248px; --rechts-b:280px; --ui:13px; --h:30px; --schatten-schwebe:var(--schwebe); } :root[data-stil="figma"] body{line-height:1.4;-webkit-font-smoothing:auto} /* Nur im Editor sind die Überschriften nüchtern; Start- und Unterseiten behalten die fette Typografie der Landing Page. */ :root[data-stil="figma"] body.editor h1, :root[data-stil="figma"] body.editor h2, :root[data-stil="figma"] body.editor h3{font-weight:600} :root[data-stil="figma"] :focus-visible{outline:1px solid var(--akz);outline-offset:1px} /* Felder: graues Kästchen, kein Rahmen, blauer Rahmen beim Schreiben */ :root[data-stil="figma"] .zahl, :root[data-stil="figma"] .textfeld, :root[data-stil="figma"] .auswahlfeld, :root[data-stil="figma"] .farbwahl{background:var(--g100)!important;border:1px solid transparent!important; border-radius:var(--r-klein)!important;font-size:13px!important;box-shadow:none!important} :root[data-stil="figma"] .zahl:hover, :root[data-stil="figma"] .textfeld:hover, :root[data-stil="figma"] .auswahlfeld:hover, :root[data-stil="figma"] .farbwahl:hover{border-color:var(--g400)!important} :root[data-stil="figma"] .zahl:focus-within, :root[data-stil="figma"] .textfeld:focus, :root[data-stil="figma"] .auswahlfeld:focus{border-color:var(--akz)!important;outline:0} :root[data-stil="figma"] .zahl__eingabe{font-size:13px;font-weight:450} :root[data-stil="figma"] .zahl__label{font-size:13px;color:var(--tx-3);font-weight:400;min-width:18px;padding-left:8px} /* Abschnitte: dunkle Überschrift, graue Beschriftungen, volle Trennlinie */ :root[data-stil="figma"] .abschnittfeld{padding:var(--a3) var(--a4) var(--a4)} :root[data-stil="figma"] .abschnittfeld__kopf h3{font-size:14px;font-weight:600;color:var(--g900)} :root[data-stil="figma"] .feldlabel, :root[data-stil="figma"] .steuerlabel{font-size:12px;color:var(--tx-3)} /* Segmentleiste: graue Bahn, aktives Feld weiss */ :root[data-stil="figma"] .segmentleiste{background:var(--g100);border-radius:var(--r-klein);padding:2px} :root[data-stil="figma"] .segmentleiste button{height:calc(var(--h) - 4px);border-radius:3px;font-size:13px;color:var(--tx-2)} :root[data-stil="figma"] .segmentleiste button[aria-pressed="true"], :root[data-stil="figma"] .segmentleiste button[aria-selected="true"]{background:var(--g25);color:var(--g900); box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.08)} /* Kopfzeile, Reiter, Listen */ :root[data-stil="figma"] .kopf__logo{height:28px} :root[data-stil="figma"] .menuleiste__knopf{height:28px;font-size:13px;padding:0 9px} :root[data-stil="figma"] .kopf__titel input{font-size:15px;font-weight:600;padding:3px 6px} :root[data-stil="figma"] .avatarpunkt{width:28px;height:28px;font-size:12px} :root[data-stil="figma"] .pruefknopf{border-radius:var(--r-klein);font-size:13px;font-weight:600} :root[data-stil="figma"] .leistenreiter{height:36px;gap:2px;padding:4px 6px;border-bottom:1px solid var(--linie)} :root[data-stil="figma"] .leistenreiter button{font-size:12px;padding:0 5px;border-radius:var(--r-klein)} :root[data-stil="figma"] .leistenreiter button[aria-selected="true"]{background:var(--g100);font-weight:600} :root[data-stil="figma"] .leistenreiter button[aria-selected="true"]::after{display:none} :root[data-stil="figma"] .menue__eintrag, :root[data-stil="figma"] .eintrag, :root[data-stil="figma"] .format, :root[data-stil="figma"] .objekt, :root[data-stil="figma"] .farbliste button{font-size:14px;border-radius:var(--r-klein)} :root[data-stil="figma"] .eintrag[aria-current="true"], :root[data-stil="figma"] .objekt[aria-selected="true"], :root[data-stil="figma"] .format[aria-pressed="true"]{background:var(--akz-weich);color:var(--akz-tx)} /* gedrückte Schalter sind hellgrau, blau bleibt dem Werkzeug vorbehalten */ :root[data-stil="figma"] .symknopf[aria-pressed="true"], :root[data-stil="figma"] body.editor .knopf--stumm[aria-pressed="true"]{background:var(--g200);color:var(--g900)} /* Werkzeugleiste schwebt weiss mit weichem Schatten, aktives Werkzeug blau */ :root[data-stil="figma"] .werkzeugleiste-schwebend{border-radius:var(--r-gross);box-shadow:0 4px 14px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.08)} :root[data-stil="figma"] .wz{width:32px;height:32px;border-radius:var(--r-klein)} :root[data-stil="figma"] .wz[aria-pressed="true"]{background:var(--akz);color:#fff} :root[data-stil="figma"] .knopf--klein, :root[data-stil="figma"] .kopfknopf{font-size:13px;border-radius:var(--r-klein)} :root[data-stil="figma"] .palette--schwebend{border-radius:var(--r-gross)} :root[data-stil="figma"] html{scrollbar-width:thin} :root[data-stil="figma"] .flaeche{background:light-dark(#e5e5e5,#1e1e1e)} /* links angedockt: keine runden Ecken, kein Schatten */ :root[data-stil="figma"] .werkzeugleiste-schwebend[data-seite="links"]{border-radius:0;box-shadow:none;border-right:1px solid var(--linie)}