/* Project Medusa – dritter Oberflächenstil «Studio»: dicht, ruhig, grau-neutral. Greift nur bei . Nach Art der verbreiteten Bildbearbeitung: feine Linien, kleine Radien, Gruppen mit Titel in der Linie, Farbe nur für Fokus, Auswahl und aktives Werkzeug. Hell und dunkel über light-dark() wie figma.css. */ :root[data-stil="studio"]{ /* hell: Paletten eine Stufe heller als die Bühne · dunkel: neutrale Grautreppe */ --g25: light-dark(#f5f5f5, #323232); --g50: light-dark(#f0f0f0, #2e2e2e); --g75: light-dark(#e8e8e8, #262626); --g100: light-dark(#e2e2e2, #3a3a3a); --g200: light-dark(#d6d6d6, #444444); --g300: light-dark(#c8c8c8, #4e4e4e); --g400: light-dark(#b0b0b0, #5c5c5c); --g500: light-dark(#959595, #737373); --g600: light-dark(#767676, #949494); --g700: light-dark(#575757, #b6b6b6); --g800: light-dark(#2b2b2b, #dddddd); --g900: light-dark(#161616, #f4f4f4); --feld: light-dark(#ffffff, #1f1f1f); --akz: #1473e6; --akz-hover: light-dark(#0d66d0, #2680eb); --akz-weich: light-dark(#dbe9fb, #1d3552); --akz-tx: light-dark(#0d66d0, #6aa8f5); --akz-linie: light-dark(#9cc2f2, #2a5a93); --auswahl: #1473e6; --r-klein:3px; --r:4px; --r-gross:6px; --t-mini:11px; --t-klein:13px; --t-basis:13px; --t-gross:16px; --t-h2:24px; --a1:2px; --a2:6px; --a3:8px; --a4:10px; --a5:16px; --a6:20px; --a7:32px; --a8:44px; --a9:60px; --ring:0 0 0 1px var(--akz); --schwebe:0 2px 8px light-dark(rgba(0,0,0,.18), rgba(0,0,0,.55)), 0 0 0 1px light-dark(rgba(0,0,0,.12), rgba(0,0,0,.5)); --kopf-h:44px; --steuer-h:54px; --links-b:240px; --rechts-b:272px; --ui:12px; --h:26px; --schatten-schwebe:var(--schwebe); } :root[data-stil="studio"] body{line-height:1.35;-webkit-font-smoothing:auto} :root[data-stil="studio"] body.editor h1, :root[data-stil="studio"] body.editor h2, :root[data-stil="studio"] body.editor h3{font-weight:600} :root[data-stil="studio"] :focus-visible{outline:1px solid var(--akz);outline-offset:0} :root[data-stil="studio"] html{scrollbar-width:thin} :root[data-stil="studio"] .flaeche{background:light-dark(#d4d4d4,#1c1c1c)} /* Felder: weiss mit feinem Rand, blauer Rand beim Schreiben, deaktiviert blass */ :root[data-stil="studio"] .zahl, :root[data-stil="studio"] .textfeld, :root[data-stil="studio"] .auswahlfeld, :root[data-stil="studio"] .farbwahl{background-color:var(--feld)!important;border:1px solid var(--g300)!important; border-radius:var(--r-klein)!important;font-size:12px!important;box-shadow:none!important} :root[data-stil="studio"] .zahl:hover, :root[data-stil="studio"] .textfeld:hover, :root[data-stil="studio"] .auswahlfeld:hover, :root[data-stil="studio"] .farbwahl:hover{border-color:var(--g500)!important} :root[data-stil="studio"] .zahl:focus-within, :root[data-stil="studio"] .textfeld:focus, :root[data-stil="studio"] .auswahlfeld:focus{border-color:var(--akz)!important;outline:0} :root[data-stil="studio"] .zahl__eingabe{font-size:12px} :root[data-stil="studio"] .zahl__label{font-size:12px;color:var(--tx-3);min-width:16px;padding-left:6px} :root[data-stil="studio"] .zahl__einheit{padding-right:6px} :root[data-stil="studio"] .zahl.ist-aus, :root[data-stil="studio"] input:disabled, :root[data-stil="studio"] select:disabled{opacity:.45} :root[data-stil="studio"] 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="studio"] textarea{height:var(--h);font-size:12px;background:var(--feld);border-color:var(--g300);border-radius:var(--r-klein);padding:0 6px} :root[data-stil="studio"] textarea{height:auto;padding:4px 6px} :root[data-stil="studio"] input:focus, :root[data-stil="studio"] textarea:focus{border-color:var(--akz)} :root[data-stil="studio"] select{height:var(--h);font-size:12px;background-color:var(--feld);border:1px solid var(--g300);border-radius:var(--r-klein)} :root[data-stil="studio"] select:hover{background-color:var(--feld);border-color:var(--g500)} :root[data-stil="studio"] input[type=checkbox], :root[data-stil="studio"] input[type=radio]{accent-color:var(--g800);width:13px;height:13px} /* Regler: schmale graue Spur, fünfeckiger Griff darunter */ :root[data-stil="studio"] input[type=range]{height:14px;border-radius:0; background:linear-gradient(to right,var(--g700) 0 var(--pct,50%),var(--g400) var(--pct,50%) 100%) 0 2px/100% 2px no-repeat} :root[data-stil="studio"] input[type=range]::-webkit-slider-thumb{width:10px;height:11px;border:0;border-radius:0;background:var(--g800); clip-path:polygon(50% 0,100% 45%,100% 100%,0 100%,0 45%);transform:translateY(3px)} :root[data-stil="studio"] input[type=range]::-moz-range-thumb{width:10px;height:11px;border:0;border-radius:0;background:var(--g800); clip-path:polygon(50% 0,100% 45%,100% 100%,0 100%,0 45%);transform:translateY(3px)} :root[data-stil="studio"] input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:none;background:var(--akz)} :root[data-stil="studio"] input[type=range]:focus-visible::-moz-range-thumb{background:var(--akz)} /* Knöpfe: kleiner Radius wie die Felder, keine Pillen; Hauptknopf mit blauem Rand */ :root[data-stil="studio"] .knopf{height:var(--h);min-width:64px;padding:0 12px;font-size:12px;font-weight:500; border-radius:var(--r-klein);background:var(--g100);color:var(--g900);border:1px solid var(--akz)} :root[data-stil="studio"] .knopf:hover{background:var(--g200)} :root[data-stil="studio"] .knopf:active{transform:none} :root[data-stil="studio"] .knopf--stumm{border-color:var(--g300)} :root[data-stil="studio"] .knopf--gefahr{border-color:var(--schlecht);color:var(--schlecht)} :root[data-stil="studio"] .knopf:disabled{border-color:var(--g300);color:var(--g400)} :root[data-stil="studio"] body.editor .knopf{color:var(--g900)} :root[data-stil="studio"] .knopf--klein, :root[data-stil="studio"] .kopfknopf, :root[data-stil="studio"] .pruefknopf{font-size:12px;border-radius:var(--r-klein)} :root[data-stil="studio"] .symknopf{border-radius:var(--r-klein)} :root[data-stil="studio"] .symknopf[aria-pressed="true"], :root[data-stil="studio"] body.editor .knopf--stumm[aria-pressed="true"]{background:var(--g300);color:var(--g900)} /* Paletten: Gruppen als dünner Rahmen mit Titel in der Linie */ :root[data-stil="studio"] .abschnittfeld{margin:14px 8px 6px;padding:6px 8px 8px;border:1px solid var(--g300);border-radius:var(--r)} :root[data-stil="studio"] .abschnittfeld:last-child{border-bottom:1px solid var(--g300)} :root[data-stil="studio"] .abschnittfeld.ist-zu{padding-bottom:0} :root[data-stil="studio"] .abschnittfeld__kopf{min-height:20px;margin:-17px 0 4px} :root[data-stil="studio"] .abschnittfeld__titel{flex:0 1 auto;background:var(--flaeche);padding:0 4px;margin-left:-4px} :root[data-stil="studio"] .abschnittfeld__aktionen{background:var(--flaeche);padding-left:2px} :root[data-stil="studio"] .abschnittfeld__kopf h3{font-size:12px;font-weight:600;color:var(--g800)} :root[data-stil="studio"] .feldlabel, :root[data-stil="studio"] .steuerlabel{font-size:11px;color:var(--tx-2)} :root[data-stil="studio"] .palette + .palette{border-top:1px solid var(--g300)} /* Aufklappbereiche: feine Trennlinie, Winkel links */ :root[data-stil="studio"] .aufklapp{border-top:1px solid var(--g300);padding:4px 0} :root[data-stil="studio"] .aufklapp summary{font-size:12px;padding:2px 0} :root[data-stil="studio"] .aufklapp summary::before{width:5px;height:5px;border:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(-45deg);margin:0 2px} :root[data-stil="studio"] .aufklapp[open] summary::before{transform:rotate(45deg) translate(-1px,-1px)} /* Segmentleiste */ :root[data-stil="studio"] .segmentleiste{background:var(--g100);border:1px solid var(--g300);border-radius:var(--r-klein);padding:1px} :root[data-stil="studio"] .segmentleiste button{height:calc(var(--h) - 4px);border-radius:2px;font-size:12px;color:var(--tx-2)} :root[data-stil="studio"] .segmentleiste button[aria-pressed="true"], :root[data-stil="studio"] .segmentleiste button[aria-selected="true"]{background:var(--feld);color:var(--g900);box-shadow:0 0 0 1px var(--g300)} /* Dialoge: Kopf mit zentriertem, fettem Titel und feiner Linie; Beschriftung mit Doppelpunkt */ :root[data-stil="studio"] dialog.fenster{border:1px solid var(--g300);border-radius:var(--r-gross);font-size:12px} :root[data-stil="studio"] .fenster__kopf{display:grid;grid-template-columns:28px 1fr 28px;align-items:center;gap:0; padding:6px 8px;border-bottom:1px solid var(--g300)} :root[data-stil="studio"] .fenster__titel{grid-column:2;text-align:center;font-size:13px;font-weight:700} :root[data-stil="studio"] .schliessen{grid-column:3;width:24px;height:24px;margin:0;font-size:16px} :root[data-stil="studio"] .fenster__koerper{padding:var(--a5)} :root[data-stil="studio"] .fenster__fuss{padding:var(--a3) var(--a5) var(--a5)} :root[data-stil="studio"] .dialogfeld > .feldlabel::after, :root[data-stil="studio"] .dialogfeld:not(.dialogfeld--kontrolle) > label:not(:has(input,select,textarea))::after{content:":"} :root[data-stil="studio"] .dialogtrenner{border-top-color:var(--g300)} /* Kopfzeile, Menüleiste, Reiter, Listen: flach und grau */ :root[data-stil="studio"] .kopf, :root[data-stil="studio"] .steuerleiste{background:var(--g50);border-bottom-color:var(--g300)} :root[data-stil="studio"] .kopf__logo{height:26px} :root[data-stil="studio"] .menuleiste__knopf{height:24px;font-size:12px;padding:0 8px;border-radius:2px} :root[data-stil="studio"] .menuleiste__knopf:hover{background:var(--g200)} :root[data-stil="studio"] .menuleiste__knopf[aria-expanded="true"]{background:var(--g300)} :root[data-stil="studio"] .kopf__titel input{font-size:13px;font-weight:600;padding:2px 6px;height:26px} :root[data-stil="studio"] .avatarpunkt{width:24px;height:24px;font-size:11px} :root[data-stil="studio"] .menue{border-radius:var(--r);padding:4px;border-color:var(--g300)} :root[data-stil="studio"] .menue__eintrag{font-size:12px;border-radius:2px;min-height:24px} :root[data-stil="studio"] .menue__eintrag:hover:not(:disabled), :root[data-stil="studio"] .menue__eintrag:focus-visible{background:var(--akz);color:#fff} :root[data-stil="studio"] .menue__eintrag:hover:not(:disabled) .menue__taste{color:inherit} :root[data-stil="studio"] .schwebe{border-radius:var(--r);border-color:var(--g300)} :root[data-stil="studio"] .leistenreiter{height:30px;gap:0;padding:0;background:var(--g75);border-bottom:1px solid var(--g300)} :root[data-stil="studio"] .leistenreiter button{font-size:12px;padding:0 10px;border-radius:0;border-right:1px solid var(--g300)} :root[data-stil="studio"] .leistenreiter button[aria-selected="true"]{background:var(--flaeche);font-weight:600;color:var(--g900)} :root[data-stil="studio"] .leistenreiter button[aria-selected="true"]::after{display:none} :root[data-stil="studio"] .leistenreiter .palette__knopf{border-right:0;padding:0;margin-right:2px} :root[data-stil="studio"] .eintrag, :root[data-stil="studio"] .format, :root[data-stil="studio"] .objekt, :root[data-stil="studio"] .farbliste button{font-size:12px;border-radius:2px} :root[data-stil="studio"] .eintrag[aria-current="true"], :root[data-stil="studio"] .objekt[aria-selected="true"], :root[data-stil="studio"] .format[aria-pressed="true"]{background:var(--akz-weich);color:var(--akz-tx)} :root[data-stil="studio"] .dock + .dock, :root[data-stil="studio"] .dockspalte + .dockspalte{border-color:var(--g300)} :root[data-stil="studio"] .dock--links{border-right-color:var(--g300)} :root[data-stil="studio"] .dock--rechts{border-left-color:var(--g300)} /* Werkzeugleiste: flach, fein umrandet, aktives Werkzeug mit Akzent */ :root[data-stil="studio"] .werkzeugleiste-schwebend{padding:3px;border:1px solid var(--g300);border-radius:var(--r-gross);background:var(--g50);box-shadow:var(--schwebe)} :root[data-stil="studio"] .werkzeugleiste-schwebend[data-seite="links"]{border-radius:0;box-shadow:none;border-width:0 1px 0 0} :root[data-stil="studio"] .wz{width:28px;height:28px;border-radius:var(--r-klein);color:var(--g700)} :root[data-stil="studio"] .wz:hover{background:var(--g200);color:var(--g900)} :root[data-stil="studio"] .wz[aria-pressed="true"]{background:var(--akz-weich);color:var(--akz-tx);box-shadow:inset 0 0 0 1px var(--akz-linie)} :root[data-stil="studio"] .palette--schwebend{border-radius:var(--r-gross);border-color:var(--g300)}