/* ============================================================ PSD-Studio — Oberfläche des Editors („Neu gedacht", Figma tSd3wcXx2j64QN5SmG9ITI). Werte kommen ausschließlich aus tokens.css. Hier stehen Anordnung und Zustände, keine Farben. Aufbau: Die Bühne liegt randlos im ganzen Fenster, die Bedienung schwebt in Inseln darüber (D2): oben links Datei oben rechts Verlauf, Befehl, Licht, Ausgabe links Werkzeuge rechts Ebenen, Eigenschaften unten Status und Dock (Stapel, Verlauf, Zoom) Die Startansicht (D1) ist eine ruhige Seite im Tageslicht. setzt app.js. Bewusste Abweichung von Figma: Eingabefelder behalten einen Rahmen in linie-bedienung. Ohne ihn hebt sich ein Feld nur mit ~1,1:1 von der Insel ab; WCAG 1.4.11 verlangt 3:1 für die Grenze eines Bedienelements. ============================================================ */ * { box-sizing: border-box; } html, body { height: 100%; } ::selection { background: var(--markierung); color: var(--text-primaer); } * { scrollbar-color: var(--linie-standard) transparent; scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--linie-standard); border-radius: var(--radius-pille); border: 3px solid var(--grund-leiste); } *::-webkit-scrollbar-thumb:hover { background: var(--linie-bedienung); } body { margin: 0; background: var(--grund-buehne); color: var(--text-primaer); font: var(--stil-text); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; height: 100vh; height: 100dvh; } html[data-ansicht="start"] body { background: var(--grund-papier); } button, input, select, textarea { font: inherit; } .spacer { flex: 1; } [hidden] { display: none !important; } .zahl { font: var(--stil-zahl); } kbd { display: inline-block; min-width: 20px; padding: 1px 6px; font: var(--stil-taste); color: var(--text-sekundaer); background: var(--grund-feld); border: 1px solid var(--linie-standard); border-radius: 5px; text-align: center; } #psdstudio { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; } .rechtszeile { flex: 0 0 auto; } /* ------------------------------------------------ Insel */ .insel, .kopfdatei, .kopfknoepfe, .werkzeugplatz, .seite { background: var(--grund-leiste); border: 1px solid var(--linie-standard); border-radius: var(--radius-gross); box-shadow: var(--schatten-insel); } .trennstrich { display: inline-block; width: 1px; height: 20px; background: var(--linie-standard); margin: 0 var(--abstand-1); flex: 0 0 auto; } /* ------------------------------------------------ Knöpfe Primär (Marke), .ghost = Sekundär (umrandet), .leise (ohne Fläche), .ico (nur Zeichen). Normal 36 hoch, .sm 28 (Figma „Knopf"). */ .kn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); min-height: var(--hoehe-knopf); padding: 0 var(--abstand-4); border: 1px solid transparent; border-radius: var(--radius-mittel); background: var(--akzent-marke); color: var(--text-auf-akzent); font: var(--stil-text-stark); cursor: pointer; white-space: nowrap; transition: background-color 130ms var(--raus), border-color 130ms var(--raus), transform 120ms var(--raus); } .kn.ghost { background: var(--grund-leiste); color: var(--text-primaer); border-color: var(--linie-bedienung); } .kn.leise { background: transparent; color: var(--text-primaer); } .kn.sm { min-height: var(--hoehe-knopf-klein); padding: 0 var(--abstand-3); font: var(--stil-beschriftung); border-radius: var(--radius-klein); } .kn.ico { width: var(--hoehe-knopf); padding: 0; background: transparent; color: var(--text-primaer); } .kn.ico.sm { width: var(--hoehe-knopf-klein); min-height: var(--hoehe-knopf-klein); } .kn svg, .kn .kzeichen { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .kn.ico svg { width: 20px; height: 20px; } .kn.sm svg, .kn.ico.sm svg { width: 16px; height: 16px; } @media (hover: hover) and (pointer: fine) { .kn:hover:not(:disabled) { background: var(--akzent-hover); } .kn.ghost:hover:not(:disabled), .kn.leise:hover:not(:disabled), .kn.ico:hover:not(:disabled) { background: var(--grund-feld); } } /* Druck: hinter den Hover-Regeln, sonst gewinnt beim Drücken die Hover-Farbe. Figma: gleiche Farbe wie Hover plus innerer Schatten. */ .kn:active:not(:disabled) { transform: scale(.97); background: var(--akzent-gedrueckt); box-shadow: var(--innen-druck); } .kn.ghost:active:not(:disabled), .kn.leise:active:not(:disabled), .kn.ico:active:not(:disabled) { background: var(--grund-feld); } /* Gedrückte Umschalter (Stapel, Verlauf): volle Markenfläche wie „Werkzeug an". */ .kn[aria-pressed="true"], .kn[aria-pressed="true"]:hover { background: var(--akzent-marke); color: var(--text-auf-akzent); } /* Der Lichtschalter zeigt seinen Zustand am Zeichen (Sonne/Mond), nicht an einer Fläche. */ #bLicht[aria-pressed="true"] { background: transparent; color: var(--text-primaer); } @media (hover: hover) and (pointer: fine) { #bLicht[aria-pressed="true"]:hover { background: var(--grund-feld); } } .kn:disabled { opacity: .4; cursor: default; } .kn .knzeichen { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } /* Fokusring: Abstand in Inselfarbe, dann Marke. Der durchsichtige Umriss bleibt, weil Windows im Kontrastmodus Schatten entfernt. */ .kn:focus-visible, .wz:focus-visible, .startkarte:focus-visible, .wandlerzone:focus-visible, .startzeile:focus-visible, .auge:focus-visible, .gruppenzeichen:focus-visible, .exportwahl button:focus-visible, .befehlsuche:focus-visible, .zoomwert:focus-visible, .streifen button:focus-visible, .stapelschild .sname:focus-visible, .kimuster:focus-visible, .marke:focus-visible, input[type=checkbox]:focus-visible, .warnbadge:focus-visible { outline: 2px solid transparent; box-shadow: var(--fokusring); } /* Listenzeilen: der Ring liegt INNEN, weil die Liste scrollt und einen äußeren Ring an der ersten Zeile abschneiden würde. */ .ebenen li:focus-visible, .befehlliste li:focus-visible { outline: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--grund-leiste), inset 0 0 0 3px var(--akzent-marke); } /* ------------------------------------------------ Eingaben */ input[type=number], input[type=text], select, textarea { background: var(--grund-feld); border: 1px solid var(--linie-bedienung); border-radius: var(--radius-mittel); color: var(--text-primaer); font: var(--stil-klein); padding: 6px var(--abstand-3); min-height: var(--hoehe-feld); transition: border-color 90ms var(--raus); } input[type=number] { font: var(--stil-zahl); } @media (hover: hover) and (pointer: fine) { input[type=number]:hover, input[type=text]:hover, select:hover, textarea:hover { border-color: var(--text-sekundaer); } } input[type=number]:focus-visible, input[type=text]:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid transparent; border-color: var(--akzent-marke); box-shadow: inset 0 0 0 1px var(--akzent-marke); } select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--text-sekundaer) 50%), linear-gradient(135deg, var(--text-sekundaer) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; } input[type=color] { width: 20px; height: 20px; border: 1px solid var(--linie-standard); border-radius: 5px; background: none; padding: 0; cursor: pointer; flex: 0 0 auto; } input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } input[type=color]::-webkit-color-swatch { border: 0; border-radius: 4px; } input[type=color]::-moz-color-swatch { border: 0; border-radius: 4px; } input[type=color]:focus-visible { outline: 2px solid transparent; box-shadow: var(--fokusring); } /* Beschriftung (Figma UI/Beschriftung): Medium 12, normale Schreibung. */ label, .beschriftung { display: block; font: var(--stil-beschriftung); color: var(--text-sekundaer); } .vfarbe { display: grid; gap: var(--abstand-1); } label > select { display: block; width: 100%; margin-top: var(--abstand-1); } /* ------------------------------------------------ Wertleiste Regler und Zahl in EINEM Feld (Figma „Wertleiste"): die Tönung zeigt den Wert, die 2-px-Linie unten ebenso. Der echte Regler liegt unsichtbar über dem ganzen Feld — ziehen, klicken und Pfeiltasten funktionieren wie bei jedem Regler, Vorleseprogramme hören ihn als Schieberegler. Den Anteil (--anteil) setzt app.js am Feld. */ label:has(> input[type=range]), .kregler { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2); min-height: var(--hoehe-feld); padding: 0 var(--abstand-3); background: linear-gradient(var(--akzent-toenung), var(--akzent-toenung)) 0 0 / var(--anteil, 0%) 100% no-repeat, var(--grund-feld); border: 1px solid var(--linie-bedienung); border-radius: var(--radius-mittel); color: var(--text-sekundaer); font: var(--stil-beschriftung); cursor: ew-resize; overflow: hidden; transition: border-color 90ms var(--raus); } label:has(> input[type=range])::after, .kregler::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--anteil, 0%); background: var(--akzent-marke); pointer-events: none; } label:has(> input[type=range]) > input[type=range], .kregler > input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; } .kregler-kopf { display: contents; } label > span[id$="Wert"], label > span[data-wert], .kregler-wert { font: var(--stil-zahl); color: var(--text-primaer); pointer-events: none; } @media (hover: hover) and (pointer: fine) { label:has(> input[type=range]):hover, .kregler:hover { border-color: var(--text-sekundaer); } } label:has(> input[type=range]:focus-visible), .kregler:has(> input[type=range]:focus-visible) { border-color: var(--akzent-marke); box-shadow: inset 0 0 0 1px var(--akzent-marke); } /* ------------------------------------------------ Farbfeld, Zahlenfeld */ .farbfeld { display: flex; align-items: center; gap: var(--abstand-2); min-height: var(--hoehe-feld); padding: 0 var(--abstand-3) 0 6px; background: var(--grund-feld); border: 1px solid var(--linie-bedienung); border-radius: var(--radius-mittel); flex: 1; min-width: 0; font: var(--stil-text); color: var(--text-primaer); cursor: pointer; transition: border-color 90ms var(--raus); } @media (hover: hover) and (pointer: fine) { .farbfeld:hover { border-color: var(--text-sekundaer); } } .farbfeld .hex { font: var(--stil-zahl); color: var(--text-primaer); text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .farbfeld[data-leer] .hex { color: var(--text-sekundaer); text-transform: none; } .farbfeld[data-leer] input[type=color] { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--text-sekundaer) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), var(--grund-feld); } .farbfeld[data-leer] input[type=color]::-webkit-color-swatch { opacity: 0; } .farbfeld[data-leer] input[type=color]::-moz-color-swatch { opacity: 0; } /* Zahlenfeld: die Beschriftung links ist der Ziehgriff (app.js). */ .zahlfeld { display: flex; align-items: center; gap: var(--abstand-2); min-height: var(--hoehe-feld); padding: 0 0 0 var(--abstand-3); background: var(--grund-feld); border: 1px solid var(--linie-bedienung); border-radius: var(--radius-mittel); cursor: ew-resize; touch-action: none; user-select: none; min-width: 0; font: var(--stil-beschriftung); color: var(--text-sekundaer); } .zahlfeld input[type=number] { flex: 1; min-width: 0; width: 100%; border: 0; background: none; min-height: 28px; padding: 0 var(--abstand-2) 0 0; cursor: text; -moz-appearance: textfield; } .zahlfeld input[type=number]::-webkit-inner-spin-button, .zahlfeld input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .zahlfeld:focus-within { border-color: var(--akzent-marke); box-shadow: inset 0 0 0 1px var(--akzent-marke); } .zahlfeld input[type=number]:focus-visible { box-shadow: none; } @media (hover: hover) and (pointer: fine) { .zahlfeld:hover:not(:focus-within) { border-color: var(--text-sekundaer); } } .zahlfeld.zieht { border-color: var(--akzent-marke); } /* Wischhinweis für waagerecht scrollende Zeilen (schmale Fenster). */ @property --wisch-links { syntax: ''; inherits: false; initial-value: 0px; } @property --wisch-rechts { syntax: ''; inherits: false; initial-value: 0px; } @keyframes wischhinweis { from { --wisch-links: 0px; --wisch-rechts: var(--abstand-6); } to { --wisch-links: var(--abstand-6); --wisch-rechts: 0px; } } /* ------------------------------------------------ Kopfleiste */ .kopf { display: flex; align-items: center; gap: var(--abstand-3); position: relative; z-index: 20; } .kopfdatei { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 0 var(--abstand-4) 0 var(--abstand-3); } .marke { display: inline-flex; align-items: center; gap: 10px; font: var(--stil-text-stark); color: var(--text-primaer); text-decoration: none; flex: 0 0 auto; border-radius: var(--radius-klein); } .marke svg { width: 22px; height: 22px; flex: 0 0 auto; } .dokname { display: block; min-width: 0; max-width: 240px; flex: 0 1 auto; padding: 1px 0 1px 10px; border-left: 1px solid var(--linie-standard); color: var(--text-sekundaer); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kopfknoepfe { display: flex; align-items: center; justify-content: flex-end; gap: var(--abstand-1); padding: 5px; min-width: 0; } /* Befehlszeile als Suchfeld (Figma D2): ein Knopf, der wie ein Feld aussieht. */ .befehlsuche { appearance: none; display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: var(--hoehe-knopf); width: 216px; padding: 0 6px 0 var(--abstand-3); background: var(--grund-feld); border: 1px solid transparent; border-radius: var(--radius-mittel); color: var(--text-sekundaer); font: var(--stil-text); cursor: pointer; flex: 0 0 auto; transition: border-color 90ms var(--raus); } .befehlsuche svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; flex: 0 0 auto; } .befehlsuche .bstext { flex: 1; text-align: left; } .befehlsuche kbd { background: var(--grund-leiste); } @media (hover: hover) and (pointer: fine) { .befehlsuche:hover { border-color: var(--linie-bedienung); } } /* Lichtschalter: in der Dunkelkammer die Sonne (zum Tageslicht), im Tageslicht der Mond. */ #bLicht .mond, html[data-licht="tag"] #bLicht .sonne { display: none; } html[data-licht="tag"] #bLicht .mond { display: block; } .werkzeuge { display: flex; flex-direction: column; align-items: center; gap: var(--abstand-1); } .werkzeugplatz { padding: 5px; } .wz { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: var(--hoehe-werkzeug); height: var(--hoehe-werkzeug); padding: 0; border: 0; border-radius: var(--radius-mittel); background: transparent; color: var(--text-sekundaer); cursor: pointer; flex: 0 0 auto; /* Werkzeugwechsel passiert dutzendfach: nur Farbe, kurz. */ transition: color 90ms var(--raus), background-color 90ms var(--raus); } .wz svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) and (pointer: fine) { .wz:hover { color: var(--text-primaer); background: var(--grund-feld); } } .wz:active { transform: scale(.94); } /* An: volle Markenfläche (Figma „Werkzeug an"). */ .wz.an, .wz.an:hover { color: var(--text-auf-akzent); background: var(--akzent-marke); } /* Tooltip mit Kürzel (werkbank.js): umgekehrte Farben, erscheint neben dem Werkzeug. */ .tipp { position: fixed; z-index: 100; display: flex; align-items: center; gap: var(--abstand-2); padding: 4px 4px 4px var(--abstand-2); background: var(--text-primaer); color: var(--grund-leiste); border-radius: var(--radius-klein); font: var(--stil-beschriftung); pointer-events: none; white-space: nowrap; } .tipp kbd { background: var(--text-sekundaer); color: var(--grund-leiste); border: 0; } .tipp:not(:has(kbd)) { padding-right: var(--abstand-2); } /* ================================================= Startansicht Arbeitsbeginn wie in einem Programm, keine Werbeseite (Tim, 26.09.2026): die Ablage ist der Hauptweg — Klick öffnet, Ziehen legt ab —, rechts „Neu" und die Werkzeuge, darunter der Umwandler. */ /* Kopf in derselben Flucht wie der Inhalt (max. 1248 px, mittig) */ html[data-ansicht="start"] .kopf { width: 100%; max-width: 1248px; margin: 0 auto; padding: var(--abstand-4) var(--abstand-12) 0; } html[data-ansicht="start"] .kopfdatei, html[data-ansicht="start"] .kopfknoepfe { background: none; border: 0; box-shadow: none; padding: 0; } html[data-ansicht="start"] .kopfdatei { flex: 1; } html[data-ansicht="start"] .marke { font: var(--stil-titel); } html[data-ansicht="start"] .marke svg { width: 28px; height: 28px; } /* Öffnen und Neu stehen im Start selbst — oben rechts nur noch Licht. */ html[data-ansicht="start"] .nurstart, html[data-ansicht="start"] #bOeffnen, html[data-ansicht="start"] #bBefehl { display: none; } #start { flex: 1; overflow: auto; background: var(--grund-papier); } .startinnen { max-width: 1248px; margin: 0 auto; padding: var(--abstand-6) var(--abstand-12) var(--abstand-12); display: grid; gap: var(--abstand-8); } .startwerk { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--abstand-4); align-items: stretch; } /* Ablage: das Markenzeichen klein als Zeichen, darunter was zu tun ist */ .startablage { position: relative; display: grid; justify-items: center; align-content: center; gap: var(--abstand-2); min-height: 360px; padding: var(--abstand-8) var(--abstand-6); background: var(--grund-leiste); color: var(--text-primaer); border: 1px solid var(--linie-bedienung); border-radius: var(--radius-gross); text-align: center; cursor: pointer; transition: border-color 150ms var(--raus); } .startablage.ablage { border-style: hidden; } .stapelbild { width: 100%; max-width: 200px; height: auto; overflow: visible; margin-bottom: var(--abstand-2); } .pl-seite-r { fill: var(--grund-feld); } .pl-seite-l { fill: var(--linie-standard); } .pl-unten .pl-oben { fill: var(--grund-leiste); stroke: var(--linie-bedienung); stroke-width: 1.5; } .pl-mitte .pl-oben { fill: rgb(47 230 212 / .22); stroke: var(--tuerkis-400); stroke-width: 1.5; } .pl-ziel .pl-oben { fill: var(--akzent-toenung); stroke: var(--akzent-marke); stroke-width: 2; stroke-dasharray: 8 6; } .pl-ziel { transition: transform 200ms var(--raus); } .ablagetitel { font: var(--stil-titel-gross); } .ablagetext { font: var(--stil-text); color: var(--text-sekundaer); } .ablageformate { font: var(--stil-zahl); color: var(--text-sekundaer); } /* Datei darüber: die oberste Lage hebt sich an und wird durchgezogen. */ @media (hover: hover) and (pointer: fine) { .startablage:hover { border-color: var(--text-sekundaer); } .startablage:hover .pl-ziel { transform: translateY(-6px); } } .startablage.zieht { border-color: var(--akzent-marke); background: linear-gradient(var(--akzent-toenung), var(--akzent-toenung)), var(--grund-leiste); } .startablage.zieht .pl-ziel { transform: translateY(-12px); } .startablage.zieht .pl-ziel .pl-oben { stroke-dasharray: none; } /* Neu und Werkzeuge: Zeilen wie in einem Menü */ .startliste { display: flex; flex-direction: column; gap: 2px; padding: var(--abstand-3); background: var(--grund-leiste); border: 1px solid var(--linie-standard); border-radius: var(--radius-gross); } .startliste .beschriftung { margin: var(--abstand-3) var(--abstand-3) var(--abstand-1); } .startliste .beschriftung:first-child { margin-top: var(--abstand-1); } .startzeile { appearance: none; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--abstand-3); align-items: center; min-height: 56px; padding: var(--abstand-2) var(--abstand-3); text-align: left; background: none; border: 0; border-radius: var(--radius-mittel); color: var(--text-primaer); cursor: pointer; transition: background-color 90ms var(--raus); } .startzeile svg { grid-row: 1 / span 2; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sztitel { font: var(--stil-text-stark); } .szinfo { font: var(--stil-klein); color: var(--text-sekundaer); } @media (hover: hover) and (pointer: fine) { .startzeile:hover { background: var(--grund-feld); } } .startzeile:active { background: var(--grund-feld); } .wandler { display: grid; gap: var(--abstand-4); scroll-margin-top: var(--abstand-6); } .wandlerkopf h2 { margin: 0 0 var(--abstand-1); font: var(--stil-titel-gross); } .wandlerkopf p { margin: 0; color: var(--text-sekundaer); max-width: 720px; } .wandlerzone { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 72px; padding: var(--abstand-4); background: var(--grund-leiste); color: var(--text-sekundaer); border: 1px solid var(--linie-bedienung); border-radius: var(--radius-gross); text-align: center; cursor: pointer; transition: border-color 150ms var(--raus), color 150ms var(--raus); } .wandlerzone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; flex: 0 0 auto; } .wandlerzone.zieht { border-color: var(--akzent-marke); color: var(--text-primaer); } @media (hover: hover) and (pointer: fine) { .wandlerzone:hover { border-color: var(--text-sekundaer); color: var(--text-primaer); } } .wandlerzone:active { border-color: var(--akzent-marke); } /* Gestrichelter Rahmen der Ablage wie Figma: Striche 6, Lücken 5. Ein Pseudoelement zeichnet ihn, eine SVG-Maske schneidet die Striche aus; der echte Rahmen ist unsichtbar, vererbt aber seine Farbe — so wirken die Zustände oben unverändert. */ .wandlerzone.ablage { position: relative; border-style: hidden; padding: calc(var(--abstand-4) + 1px); } .wandlerzone.ablage::before, .startablage.ablage::before { content: ''; position: absolute; inset: 0; border: 1px solid; border-color: inherit; border-radius: inherit; pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='14' ry='14' fill='none' stroke='black' stroke-width='2' stroke-dasharray='6 5'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='14' ry='14' fill='none' stroke='black' stroke-width='2' stroke-dasharray='6 5'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } .wandlersteuer { display: flex; flex-wrap: wrap; gap: var(--abstand-3); align-items: end; } .wandlersteuer > label { min-width: 160px; } .wandlersteuer > label:has(> input[type=range]) { min-width: 220px; } .wandlerliste { display: grid; gap: 6px; } .wandlerliste:empty { display: none; } /* Dateizeile (Figma „Dateizeile"): vorher → nachher und Ersparnis in Mono, Status als Punkt + Wort. */ .wandlerzeile { display: flex; align-items: center; gap: var(--abstand-4); min-height: 56px; padding: 6px var(--abstand-4) 6px var(--abstand-3); background: var(--grund-leiste); border-radius: var(--radius-mittel); } .wandlerzeile img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-klein); background: var(--grund-feld); border: 1px solid var(--linie-standard); } .wandlerzeile .wname { flex: 1; min-width: 0; font: var(--stil-text-stark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wandlerzeile .winfo { color: var(--text-sekundaer); white-space: nowrap; font: var(--stil-zahl); } .wandlerzeile .winfo b { font-weight: 400; color: var(--text-primaer); } .wandlerzeile .wstatus { display: inline-flex; align-items: center; gap: var(--abstand-2); font: var(--stil-klein); color: var(--text-sekundaer); white-space: nowrap; } .wandlerzeile .wstatus::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--linie-bedienung); } .wandlerzeile .wstatus.fertig { color: var(--text-primaer); } .wandlerzeile .wstatus.fertig::before { background: var(--akzent-zweit); } .startfuss { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-6); font: var(--stil-klein); } .starthinweis { margin: 0; display: inline-flex; align-items: center; gap: var(--abstand-2); color: var(--text-primaer); } .starthinweis .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-zweit); flex: 0 0 auto; } .startgrenzen { margin: 0; color: var(--text-sekundaer); } /* ================================================= Editoren (D2–D9) */ html[data-ansicht="raster"] .kopf, html[data-ansicht="vektor"] .kopf { position: absolute; top: var(--rand-insel); left: var(--rand-insel); right: var(--rand-insel); justify-content: space-between; align-items: flex-start; pointer-events: none; } html[data-ansicht="raster"] .kopf > *, html[data-ansicht="vektor"] .kopf > * { pointer-events: auto; } /* Werkzeuge: senkrecht links, mittig (Figma D2). */ html[data-ansicht="raster"] .werkzeugplatz, html[data-ansicht="vektor"] .werkzeugplatz { position: fixed; left: var(--rand-insel); top: 50%; transform: translateY(-50%); } #raster, #vektor { position: relative; flex: 1; min-height: 0; overflow: hidden; } /* Die Bühne füllt alles; eingepasst wird in den freien Bereich zwischen den Inseln (raster.js/vektor.js lesen --frei-*). */ .buehne { position: absolute; inset: 0; overflow: hidden; background: var(--grund-buehne); touch-action: none; /* Zahlen ohne calc(): getComputedStyle liefert eigene Eigenschaften unausgerechnet, parseFloat("calc(280px …") ergäbe 280. 312 = Spalte 280 + zweimal Inselrand 16. */ --frei-l: 76px; --frei-r: 312px; --frei-o: 76px; --frei-u: 72px; } .leinwandhalter { position: absolute; transform-origin: 0 0; } #cv, #cvOverlay { position: absolute; left: 0; top: 0; display: block; } #cv { background: conic-gradient(var(--schach-hell) 0 25%, var(--schach-dunkel) 0 50%, var(--schach-hell) 0 75%, var(--schach-dunkel) 0) 0 0 / 20px 20px; box-shadow: 0 0 0 1px var(--linie-standard), var(--schatten-buehne); } #cvOverlay { pointer-events: none; } #vSvg { display: block; background: transparent; filter: drop-shadow(0 16px 32px rgb(0 0 0 / .25)); } .texteingabe { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 12; width: min(460px, 92%); padding: var(--abstand-3); background: var(--grund-leiste); border: 1px solid var(--linie-standard); border-radius: var(--radius-gross); box-shadow: var(--schatten-blatt); } .texteingabe textarea { width: 100%; resize: vertical; font: var(--stil-text); } .textzeile { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-2); align-items: center; } .textzeile select { flex: 1; min-width: 120px; } .textzeile input[type=number] { width: 74px; } /* ------------------------------------------------ Inselspalte rechts */ .inselspalte { position: absolute; z-index: 10; top: 76px; right: var(--rand-insel); bottom: var(--rand-insel); width: var(--breite-spalte); display: flex; flex-direction: column; gap: var(--abstand-3); pointer-events: none; } .inselspalte > * { pointer-events: auto; } .seite { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overflow-x: hidden; flex: 0 1 auto; } /* Die Ebenenliste behält ihre Höhe (bis 42 %), die Eigenschaften darunter scrollen. Sonst schrumpft die Liste zuerst auf eine Zeile. */ .seite.links { flex: 0 0 auto; max-height: 42%; overflow: hidden; } .seite:not(.links) { flex: 0 1 auto; min-height: 120px; } .seite.links .feld { display: flex; flex-direction: column; min-height: 0; flex: 1; border-bottom: 0; } .feld { border-bottom: 1px solid var(--linie-standard); } .feld:last-child { border-bottom: 0; } .feldkopf { display: flex; align-items: center; gap: var(--abstand-2); min-height: 40px; padding: 0 var(--abstand-2) 0 var(--abstand-4); } .feldkopf h3 { margin: 0; font: var(--stil-text-stark); color: var(--text-primaer); } .feldnotiz { font: var(--stil-klein); color: var(--text-sekundaer); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feldknoepfe { margin-left: auto; display: flex; gap: var(--abstand-1); } .feldinhalt, .wzopt, .regler, .vobjekt, .ebenensteuer { padding: 0 var(--abstand-4) var(--abstand-4); display: grid; gap: var(--abstand-2); } .feldfuss { display: flex; gap: var(--abstand-1); padding: 6px var(--abstand-2); border-top: 1px solid var(--linie-standard); flex: 0 0 auto; } .ebenen { list-style: none; margin: 0; padding: 0 var(--abstand-2) var(--abstand-2); overflow-y: auto; flex: 1; min-height: 0; } .ebenen li { position: relative; display: flex; align-items: center; gap: var(--abstand-2); min-height: 40px; padding: 0 var(--abstand-2) 0 var(--abstand-2); border-radius: var(--radius-mittel); cursor: pointer; transition: background-color 90ms var(--raus); } @media (hover: hover) and (pointer: fine) { .ebenen li:hover { background: var(--grund-feld); } } /* Aktiv: Tönung UND 3-px-Markenstreifen links (die Tönung allein hat nur ~1,2:1 gegen die Insel). */ .ebenen li.an, .ebenen li.an:hover { background: var(--akzent-toenung); } .ebenen li.an::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--akzent-marke); } .ebenen li.an .ename { font-weight: 500; } .ebenen li .tiefe { flex: 0 0 auto; } .ebenen li .mini { width: 28px; height: 28px; object-fit: contain; background: conic-gradient(var(--schach-hell) 0 25%, var(--schach-dunkel) 0 50%, var(--schach-hell) 0 75%, var(--schach-dunkel) 0) 0 0 / 8px 8px; border-radius: var(--radius-klein); border: 1px solid var(--linie-standard); flex: 0 0 auto; } .ebenen li .ename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ebenen li .ezusatz { display: inline-flex; align-items: center; gap: var(--abstand-1); flex: 0 0 auto; } .emerkmal { display: inline-flex; color: var(--text-sekundaer); cursor: help; } .emerkmal svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .emerkmal.warnend { color: var(--status-warnung); } .ebenen li .gruppenzeichen { appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; padding: 0; background: none; border: 0; border-radius: var(--radius-klein); color: var(--text-sekundaer); cursor: pointer; transition: color 90ms var(--raus); } @media (hover: hover) and (pointer: fine) { .ebenen li .gruppenzeichen:hover { color: var(--text-primaer); } } .gruppenzeichen svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Auge: 28 x 28 Trefferfläche um das 16-px-Zeichen. */ .ebenen li .auge { appearance: none; background: none; border: 0; border-radius: var(--radius-klein); color: var(--text-sekundaer); cursor: pointer; width: 28px; height: 28px; padding: 6px; display: inline-flex; flex: 0 0 auto; } .ebenen li.an .auge { color: var(--text-primaer); } .ebenen li .auge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; } .ebenen li .auge.zu { color: var(--text-sekundaer); } .ebenen li.gruppe > .ename { font-weight: 500; } .ebenen li.unsichtbar .ename { color: var(--text-sekundaer); } .ebenen li.unsichtbar .mini { opacity: .45; } #feldWerkzeug .feldinhalt { padding-bottom: var(--abstand-2); } #feldWerkzeug .feldinhalt:has(+ .wzopt:empty) { padding-bottom: var(--abstand-4); } .wzopt:empty { display: none; } .wzopt .wzhinweis { font: var(--stil-klein); color: var(--text-sekundaer); margin: 0; } .anpknoepfe { display: flex; gap: var(--abstand-1); flex-wrap: wrap; } .filterknoepfe, .bildknoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-1); padding: 0 var(--abstand-4) var(--abstand-4); } .regler + .filterknoepfe { margin-top: calc(-1 * var(--abstand-1)); } /* ------------------------------------------------ Status und Dock */ .fuss { position: absolute; z-index: 10; left: var(--rand-insel); right: calc(var(--breite-spalte) + 2 * var(--rand-insel)); bottom: var(--rand-insel); display: flex; align-items: flex-end; justify-content: center; pointer-events: none; } .fuss > * { pointer-events: auto; } .status { position: absolute; left: 0; bottom: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--abstand-1); max-width: calc(50% - 160px); min-width: 0; font: var(--stil-zahl); color: var(--text-sekundaer); } .status > * { min-width: 0; max-width: 100%; } #fMasse, #vfMasse { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dock { display: flex; align-items: center; gap: var(--abstand-1); padding: 5px; } .verlaufzahl { font: var(--stil-zahl); color: inherit; opacity: .8; margin-left: 6px; } .verlaufzahl:empty { display: none; } .blattknopf { display: none !important; } .zoomgruppe { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; } .zoomwert { appearance: none; min-width: 56px; min-height: var(--hoehe-knopf-klein); padding: 0 var(--abstand-1); background: none; border: 0; border-radius: var(--radius-klein); font: var(--stil-zahl); color: var(--text-primaer); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .zoomwert:hover { background: var(--grund-feld); } } .ansichtwahl { display: inline-flex; gap: var(--abstand-2); align-items: center; font: var(--stil-klein); cursor: pointer; } .ansichtwahl input { flex: 0 0 auto; margin: 0; } .warnbadge { background: var(--warn-toenung); color: var(--status-warnung); border: 1px solid var(--warn-rahmen); border-radius: var(--radius-klein); padding: 1px var(--abstand-2); cursor: help; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--stil-klein); } .fusshinweis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font: var(--stil-klein); } /* ------------------------------------------------ Stapelansicht (D3) Die Ebenen als Platten im Raum, gedreht wie das Markenzeichen. werkbank.js legt die Platten an und schiebt sie beim Öffnen auseinander — die Bewegung macht sichtbar, dass das Bild aus Lagen besteht. */ .stapel { position: absolute; inset: 0; z-index: 6; background: var(--grund-buehne); overflow-x: hidden; overflow-y: auto; } .stapelraum { position: absolute; inset: 0; } .stapelwelt { position: absolute; left: 0; top: 0; transform-style: preserve-3d; } .platte { position: absolute; left: 0; top: 0; border: 1.5px solid var(--linie-bedienung); background: color-mix(in srgb, var(--grund-leiste) 55%, transparent); transition: transform 320ms var(--raus), opacity 200ms var(--raus), border-color 120ms var(--raus); cursor: pointer; } .platte canvas { display: block; width: 100%; height: 100%; } .platte.einstellung { background: color-mix(in srgb, var(--akzent-toenung) 100%, transparent); } .platte.aktiv { border: 2px solid var(--akzent-marke); } .platte.aus { opacity: .3; } .platte.zieht { border-color: var(--akzent-marke); } .stapelschild { position: absolute; display: flex; align-items: center; gap: var(--abstand-2); min-height: 40px; padding: 4px var(--abstand-3) 4px 4px; background: var(--grund-leiste); border: 1px solid var(--linie-standard); border-radius: var(--radius-mittel); box-shadow: var(--schatten-insel); font: var(--stil-text); color: var(--text-primaer); cursor: pointer; white-space: nowrap; transition: top 320ms var(--raus), opacity 200ms var(--raus); } .stapelschild::before { content: ''; position: absolute; right: 100%; top: 50%; width: 40px; border-top: 1px dashed var(--linie-bedienung); } .stapelschild.aktiv { background: color-mix(in srgb, var(--akzent-marke) 16%, var(--grund-leiste)); border-color: var(--akzent-marke); font-weight: 500; } .stapelschild.aktiv::before { border-top-style: solid; border-top-color: var(--akzent-marke); } .stapelschild.aus { color: var(--text-sekundaer); } .stapelschild .auge { appearance: none; background: none; border: 0; color: var(--text-sekundaer); width: 32px; height: 32px; padding: 8px; border-radius: var(--radius-klein); cursor: pointer; } .stapelschild .auge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; } .stapelschild .sname { appearance: none; background: none; border: 0; padding: 0 2px; border-radius: var(--radius-klein); color: inherit; font: inherit; cursor: inherit; text-align: left; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stapelschild .smodus { font: var(--stil-zahl); color: var(--text-sekundaer); } .stapelhinweis { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); display: flex; align-items: center; gap: var(--abstand-3); padding: var(--abstand-2) var(--abstand-4); font: var(--stil-klein); color: var(--text-sekundaer); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .platte, .stapelschild { transition: opacity 120ms linear; } } /* ------------------------------------------------ Verlauf (D5) */ .verlaufstreifen { position: absolute; z-index: 11; left: var(--rand-insel); right: calc(var(--breite-spalte) + 2 * var(--rand-insel)); bottom: var(--rand-insel); margin: 0 auto; width: max-content; max-width: calc(100% - 96px - var(--breite-spalte)); display: grid; gap: var(--abstand-2); padding: var(--abstand-2) var(--abstand-4) var(--abstand-4); box-shadow: var(--schatten-blatt); } .streifenkopf { display: flex; align-items: center; gap: var(--abstand-2); } .streifenkopf strong { font: var(--stil-text-stark); } .streifenhinweis { flex: 1; font: var(--stil-klein); color: var(--text-sekundaer); } .streifen { list-style: none; margin: 0; padding: 4px 2px; display: flex; gap: var(--abstand-3); overflow-x: auto; } .streifen button { appearance: none; display: grid; gap: 6px; justify-items: center; padding: 2px; background: none; border: 0; border-radius: var(--radius-klein); font: var(--stil-klein); color: var(--text-sekundaer); cursor: pointer; } .streifen img, .streifen .leer { display: block; width: 80px; height: 45px; object-fit: contain; background: var(--grund-feld); border: 1px solid var(--linie-standard); border-radius: var(--radius-klein); } .streifen .stext { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .streifen .aktuell img { outline: 2px solid var(--akzent-marke); outline-offset: 1px; } .streifen .aktuell { color: var(--text-primaer); font-weight: 500; } .streifen .zukunft { opacity: .45; } .streifen .vorschau img { outline: 2px dashed var(--akzent-marke); outline-offset: 1px; } .vorschauleiste { position: absolute; z-index: 11; top: 76px; left: var(--rand-insel); right: calc(var(--breite-spalte) + 2 * var(--rand-insel)); margin: 0 auto; width: max-content; display: flex; align-items: center; gap: var(--abstand-3); padding: 5px 5px 5px var(--abstand-4); } .vorschauleiste strong { font: var(--stil-text-stark); } .vorschauleiste .zahl { color: var(--text-sekundaer); } #raster.vorschau .leinwandhalter { outline: 2px dashed var(--akzent-marke); outline-offset: 4px; } /* ------------------------------------------------ Kontextinsel (D6) */ .kontextinsel { position: absolute; z-index: 8; display: flex; align-items: center; gap: var(--abstand-1); padding: 5px; box-shadow: var(--schatten-blatt); } .kimuster { appearance: none; width: 28px; height: 28px; padding: 3px; background: none; border: 0; border-radius: var(--radius-klein); cursor: pointer; } .kimuster span { display: block; width: 100%; height: 100%; border-radius: 5px; border: 1px solid var(--linie-standard); } .kimuster span.leer { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--text-sekundaer) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), var(--grund-feld); } @media (hover: hover) and (pointer: fine) { .kimuster:hover { background: var(--grund-feld); } } /* ------------------------------------------------ Befehlszeile (D4) */ .befehlmodal { align-items: flex-start; padding-top: 14vh; } .befehl { width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; background: var(--grund-leiste); border: 1px solid var(--linie-standard); border-radius: var(--radius-gross); box-shadow: var(--schatten-blatt); } .befehleingabe { display: flex; align-items: center; gap: var(--abstand-3); min-height: 56px; padding: 0 var(--abstand-4) 0 var(--abstand-5); border-bottom: 1px solid var(--linie-standard); } .befehleingabe svg { width: 20px; height: 20px; fill: none; stroke: var(--text-sekundaer); stroke-width: 1.6; stroke-linecap: round; flex: 0 0 auto; } .befehleingabe input, .befehleingabe input:focus-visible, .befehleingabe input:hover { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none; outline: none; padding: 0; min-height: 40px; font: var(--stil-fliesstext); color: var(--text-primaer); } .befehlliste { list-style: none; margin: 0; padding: var(--abstand-2); overflow-y: auto; } .befehlliste .bgruppe { padding: var(--abstand-2) var(--abstand-3) var(--abstand-1); font: var(--stil-beschriftung); color: var(--text-sekundaer); } .befehlliste [role=option] { display: flex; align-items: center; gap: var(--abstand-3); min-height: 44px; padding: 0 var(--abstand-3); border-radius: var(--radius-mittel); cursor: pointer; } .befehlliste [role=option] svg { width: 18px; height: 18px; fill: none; stroke: var(--text-sekundaer); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .befehlliste [aria-selected=true] { background: var(--akzent-toenung); } .befehlliste [aria-selected=true] svg { stroke: var(--text-primaer); } .befehlliste [aria-disabled=true] { opacity: .45; cursor: default; } .befehlliste .bname { font: var(--stil-text-stark); color: var(--text-primaer); white-space: nowrap; } .befehlliste .bbereich { flex: 1; min-width: 0; font: var(--stil-klein); color: var(--text-sekundaer); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .befehlliste .bkeine { padding: var(--abstand-4); color: var(--text-sekundaer); } .befehlfuss { display: flex; align-items: center; gap: var(--abstand-4); padding: 10px var(--abstand-5); background: var(--grund-feld); font: var(--stil-klein); color: var(--text-sekundaer); } .befehlfuss kbd { background: var(--grund-leiste); margin-right: 2px; } /* Ruhe (Taste F): alle Inseln aus, nur das Bild. */ html.ruhig .kopf, html.ruhig .werkzeugplatz, html.ruhig .inselspalte, html.ruhig .fuss { opacity: 0; pointer-events: none !important; } html.ruhig .kopf > *, html.ruhig .inselspalte > *, html.ruhig .fuss > * { pointer-events: none !important; } .kopf, .werkzeugplatz, .inselspalte, .fuss { transition: opacity 160ms var(--raus); } /* ------------------------------------------------ Vektor-Besonderes */ .vzeile { display: grid; gap: var(--abstand-2); } .vzeile.vmasse { grid-template-columns: 1fr 1fr; row-gap: var(--abstand-2); } .vgruppe { display: grid; gap: var(--abstand-1); } .vzeile.vknoepfe, .vzeile.vausrichten { display: flex; flex-wrap: wrap; gap: var(--abstand-1); } .farbzeile { display: flex; gap: var(--abstand-2); align-items: center; } .farbzeile .zahlfeld { flex: 0 0 84px; } .sheet .vzeile.vmasse label > input { display: block; width: 100%; margin-top: var(--abstand-1); } /* Auswahlgriffe: nur Füllung und Kontur; Strichstärke setzt vektor.js als Attribut (geteilt durch den Zoom). */ .griff { fill: var(--weiss); stroke: var(--akzent-marke); } .griffrahmen { fill: none; stroke: var(--akzent-marke); } .anker { fill: var(--weiss); stroke: var(--tuerkis-600); } .anker.an { fill: var(--tuerkis-600); } .hebel { stroke: var(--tuerkis-600); } .hebelpunkt { fill: var(--tuerkis-600); } /* ------------------------------------------------ Dialoge */ .modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: var(--schleier); z-index: 50; padding: var(--abstand-4); } .modal.offen { display: flex; } @media (prefers-reduced-motion: no-preference) { .modal.offen { animation: schleier 150ms var(--raus); } .modal.offen .sheet { animation: blattauf 190ms var(--raus); } .modal.offen .befehl { animation: befehlauf 140ms var(--raus); } @keyframes schleier { from { opacity: 0; } } @keyframes blattauf { from { opacity: 0; transform: scale(.96) translateY(6px); } } @keyframes befehlauf { from { opacity: 0; transform: scale(.98); } } } .sheet { width: min(520px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: var(--grund-leiste); border: 1px solid var(--linie-standard); border-radius: var(--radius-gross); box-shadow: var(--schatten-blatt); } .sheet.schmal { width: min(400px, 100%); } .sheet header { display: flex; align-items: center; gap: var(--abstand-2); padding: var(--abstand-4) var(--abstand-3) var(--abstand-2) var(--abstand-5); } .sheet header h3 { margin: 0; font: var(--stil-anzeige-mittel); font-size: 28px; line-height: 34px; } .sheet .body { padding: var(--abstand-1) var(--abstand-5) var(--abstand-4); overflow: auto; display: grid; gap: var(--abstand-3); } .sheet footer { display: flex; gap: var(--abstand-2); padding: var(--abstand-3) var(--abstand-5) var(--abstand-4); border-top: 1px solid var(--linie-standard); } .chk { display: flex; gap: var(--abstand-2); align-items: center; font: var(--stil-text); color: var(--text-primaer); cursor: pointer; } .exnotiz { margin: 0; font: var(--stil-klein); color: var(--text-sekundaer); } /* Ausgabe (D7): Formate als Karten mit berechneter Dateigröße und einem Balken im Verhältnis zur größten (werkbank.js füllt Größe und Balken). */ .exportwahl { display: grid; gap: var(--abstand-2); } .exportwahl button { appearance: none; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; column-gap: var(--abstand-3); padding: var(--abstand-3) var(--abstand-4); text-align: left; background: var(--grund-leiste); border: 1px solid var(--linie-standard); border-radius: var(--radius-gross); color: var(--text-primaer); font: var(--stil-titel); cursor: pointer; } .exportwahl button::before { content: ''; grid-row: 1 / span 2; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--linie-bedienung); } .exportwahl button.an { background: var(--akzent-toenung); border: 2px solid var(--akzent-marke); padding: calc(var(--abstand-3) - 1px) calc(var(--abstand-4) - 1px); } .exportwahl button.an::before { border: 5px solid var(--akzent-marke); background: var(--grund-leiste); } .exportwahl button small { grid-column: 2; display: block; color: var(--text-sekundaer); font: var(--stil-klein); margin-top: 2px; } .exportwahl .groesse { grid-column: 3; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 6px; font: var(--stil-zahl); color: var(--text-primaer); } .exportwahl .balken { width: 96px; height: 4px; border-radius: 2px; background: var(--grund-feld); overflow: hidden; } .exportwahl .balken i { display: block; height: 100%; width: var(--b, 0%); background: var(--linie-bedienung); } .exportwahl button.an .balken i { background: var(--akzent-marke); } /* ------------------------------------------------ Beschäftigt + Meldungen */ .busy { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--abstand-3); background: var(--schleier); z-index: 80; } .busy.offen { display: flex; } .spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--linie-standard); border-top-color: var(--akzent-marke); animation: drehen 0.9s linear infinite; } @keyframes drehen { to { transform: rotate(360deg); } } .busy .txt { color: var(--text-primaer); font: var(--stil-text); } @media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.5s; } .kn:active:not(:disabled), .wz:active { transform: none; } .toast { transition: opacity 220ms var(--raus); } .toast.geht { transform: none; } @starting-style { .toast { transform: none; } } .pl-ziel { transition: none; } } /* Meldung unten mittig (Figma „Meldung"), optional mit Aktion (Rückgängig nach dem Löschen). */ .toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; display: grid; justify-items: center; gap: var(--abstand-2); z-index: 90; max-width: min(520px, 92vw); } .toast { display: flex; align-items: center; gap: var(--abstand-3); min-height: 48px; padding: var(--abstand-2) var(--abstand-2) var(--abstand-2) var(--abstand-4); background: var(--grund-leiste); border: 1px solid var(--linie-standard); border-radius: var(--radius-gross); box-shadow: var(--schatten-blatt); font: var(--stil-text); opacity: 1; transform: translateY(0); transition: opacity 220ms var(--raus), transform 220ms var(--raus); } .toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-zweit); flex: 0 0 auto; } .toast:not(:has(.kn)) { padding-right: var(--abstand-4); } .toast.geht { opacity: 0; transform: translateY(8px); } @starting-style { .toast { opacity: 0; transform: translateY(8px); } } .toast.warn { color: var(--status-warnung); border-color: var(--warn-rahmen); } .toast.warn::before { background: var(--status-warnung); } .rechtszeile { display: flex; gap: var(--abstand-2); align-items: center; padding: var(--abstand-1) var(--abstand-4); font: var(--stil-klein); color: var(--text-sekundaer); background: var(--grund-papier); border-top: 1px solid var(--linie-standard); } .rechtszeile a { color: var(--text-sekundaer); } .rz-hinweis { margin-left: auto; } /* ============================================================ Einstellungsebenen (korrektur.js) — Klassen, die JS erzeugt. ============================================================ */ .kneu { padding: var(--abstand-3) var(--abstand-4); border-bottom: 1px solid var(--linie-standard); } .kneu + .korrektur { border-top: 0; } .kn.breit { width: 100%; justify-content: space-between; } .kliste { display: grid; gap: 2px; margin-top: var(--abstand-2); padding: var(--abstand-1); background: var(--grund-feld); border: 1px solid var(--linie-standard); border-radius: var(--radius-mittel); } .kliste .kn { justify-content: flex-start; width: 100%; } .korrektur { padding: var(--abstand-3) var(--abstand-4) var(--abstand-4); border-top: 1px solid var(--linie-standard); display: grid; gap: var(--abstand-2); } .kkopf .eyebrow { margin: 0; font: var(--stil-beschriftung); color: var(--akzent-marke); } .kgruppe { margin: var(--abstand-2) 0 0; font: var(--stil-beschriftung); color: var(--text-sekundaer); } .khinweis { margin: 0; font: var(--stil-klein); color: var(--text-sekundaer); } .kkurve { display: grid; justify-items: center; } .kkurve canvas { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; border: 1px solid var(--linie-standard); border-radius: var(--radius-klein); cursor: crosshair; touch-action: none; } .kkurve canvas:focus-visible { outline: 2px solid transparent; box-shadow: var(--fokusring); } .kfuss { display: flex; justify-content: flex-end; } /* ============================================================ Auswahlwerkzeuge (auswahl.js, Optionen in raster.js) ============================================================ */ .wzgruppe { margin: var(--abstand-2) 0 0; font: var(--stil-beschriftung); color: var(--text-sekundaer); } .wzgruppe:first-child { margin-top: 0; } #awAktionen { display: grid; gap: var(--abstand-2); } #wzOpt .filterknoepfe { gap: var(--abstand-1); padding: 0; } #wzOpt .filterknoepfe .kn.sm { padding: 0 var(--abstand-2); flex: 0 0 auto; } #wzOpt .kn.ghost.an { background: var(--akzent-marke); border-color: var(--akzent-marke); color: var(--text-auf-akzent); } #awZauberOpt { display: grid; gap: var(--abstand-2); } #awZauberOpt .chk { display: flex; align-items: center; gap: var(--abstand-2); } /* ------------------------------------------------ Mittlere Fenster Unter 1180 px wird die Befehlssuche zum Zeichen, damit die obere rechte Insel neben der Datei-Insel Platz hat. */ @media (width < 1180px) { .befehlsuche { width: var(--hoehe-knopf); padding: 0; justify-content: center; } .befehlsuche .bstext, .befehlsuche kbd { display: none; } } /* ------------------------------------------------ Schmale Fenster (M1–M3) Oben eine Leiste, unten die Werkzeuge zum Wischen, darüber das Dock. Ebenen und Eigenschaften werden zum Blatt von unten (#bBlatt). */ @media (max-width: 980px) { :root { --rand-insel: 8px; } html[data-ansicht="start"] .kopf { padding: var(--abstand-4) var(--abstand-4) 0; } .startinnen { padding: var(--abstand-4) var(--abstand-4) var(--abstand-8); gap: var(--abstand-6); } .startwerk { grid-template-columns: 1fr; } .startablage { min-height: 0; padding: var(--abstand-6) var(--abstand-4); } .stapelbild { max-width: 120px; } html[data-ansicht="raster"] .kopf, html[data-ansicht="vektor"] .kopf { gap: var(--abstand-2); } .kopfdatei { min-height: 44px; padding: 0 var(--abstand-3) 0 10px; } .dokname { max-width: 30vw; } /* flex-start: mit flex-end ragten Rückgängig und Wiederholen links aus der Leiste und ließen sich nicht mehr erreichen */ /* position: relative — die unsichtbaren Knopftexte (position: absolute) hingen sonst an .kopf, lagen hinter dem Scrollbereich und machten die Seite 40 px zu breit (gemessen innerWidth 415 statt 375). */ .kopfknoepfe { position: relative; justify-content: flex-start; min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--wisch-links), black calc(100% - var(--wisch-rechts)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, black var(--wisch-links), black calc(100% - var(--wisch-rechts)), transparent 100%); animation: wischhinweis linear both; animation-timeline: scroll(self inline); } .kopfknoepfe::-webkit-scrollbar { display: none; } .kopfknoepfe > * { flex: 0 0 auto; } .kn.schmalzeichen { width: var(--hoehe-knopf); padding: 0; } .kn.schmalzeichen .knzeichen { display: block; } .kn.schmalzeichen .kntext, #bExport span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #bExport { width: var(--hoehe-knopf); padding: 0; } .trennstrich.arbeit { display: none; } /* Im Editor zählt der Dateiname mehr als der Markenname: das Zeichen bleibt, der Name wird unsichtbar (vorgelesen wird er weiter). */ html[data-ansicht="raster"] .markentext, html[data-ansicht="vektor"] .markentext { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html[data-ansicht="raster"] .kopfdatei, html[data-ansicht="vektor"] .kopfdatei { flex: 0 1 auto; min-width: min(120px, 34vw); } /* Dock: Stapel und Verlauf nur als Zeichen, damit es in 359 px passt */ #bStapel > span, #bVerlauf > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #bStapel, #bVerlauf { width: var(--hoehe-knopf); padding: 0; } .dock { position: relative; max-width: 100%; overflow-x: auto; scrollbar-width: none; } html[data-ansicht="raster"] .werkzeugplatz, html[data-ansicht="vektor"] .werkzeugplatz { top: auto; bottom: var(--rand-insel); left: var(--rand-insel); right: var(--rand-insel); transform: none; } .werkzeuge { flex-direction: row; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--wisch-links), black calc(100% - var(--wisch-rechts)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, black var(--wisch-links), black calc(100% - var(--wisch-rechts)), transparent 100%); animation: wischhinweis linear both; animation-timeline: scroll(self inline); } .werkzeuge::-webkit-scrollbar { display: none; } .buehne { --frei-l: 8px; --frei-r: 8px; --frei-o: 64px; --frei-u: 128px; } .fuss { left: var(--rand-insel); right: var(--rand-insel); bottom: calc(var(--rand-insel) + 60px); } .status { display: none; } .blattknopf { display: inline-flex !important; } span.blattknopf { display: inline-block !important; } /* Blatt von unten: aus dem Bild geschoben, bis #bBlatt es öffnet. */ .inselspalte { position: fixed; z-index: 40; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 72vh; padding: var(--abstand-3) var(--abstand-2) var(--abstand-4); background: var(--grund-leiste); border-radius: 20px 20px 0 0; box-shadow: var(--schatten-blatt); transform: translateY(105%); visibility: hidden; transition: transform 220ms var(--raus), visibility 0s linear 220ms; overflow-y: auto; gap: var(--abstand-2); } .inselspalte.offen { transform: none; visibility: visible; transition: transform 220ms var(--raus); } .inselspalte::before { content: ''; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--linie-bedienung); flex: 0 0 auto; } .inselspalte .seite { box-shadow: none; border-radius: var(--radius-mittel); flex: 0 0 auto; max-height: none; overflow: visible; } .seite.links { max-height: none; } .verlaufstreifen { left: var(--rand-insel); right: var(--rand-insel); max-width: none; width: auto; bottom: calc(var(--rand-insel) + 60px); } .vorschauleiste { left: var(--rand-insel); right: var(--rand-insel); top: 60px; width: auto; flex-wrap: wrap; } .stapelhinweis { bottom: 132px; white-space: normal; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 16px); } .toasts { bottom: 140px; } .befehlmodal { padding-top: var(--abstand-4); } } /* Fingerbedienung: Ziele 44 px (--ziel-touch). Trifft das Gerät, nicht die Fensterbreite. */ @media (pointer: coarse) { .wz { width: var(--ziel-touch); height: var(--ziel-touch); } .kn, .befehlsuche { min-height: var(--ziel-touch); } .kn.ico, .kn.schmalzeichen, #bExport { min-width: var(--ziel-touch); } .kn.sm { min-height: var(--ziel-touch); } .kn.ico.sm { width: var(--ziel-touch); min-height: var(--ziel-touch); } .befehlsuche, #bStapel, #bVerlauf { min-width: var(--ziel-touch); } .zahlfeld, .farbfeld, label:has(> input[type=range]), .kregler { min-height: var(--ziel-touch); } .zahlfeld input[type=number] { min-height: calc(var(--ziel-touch) - 2px); } select, input[type=number], input[type=text] { min-height: var(--ziel-touch); } input[type=color] { width: 32px; height: 32px; } .ebenen li { min-height: var(--ziel-touch); } .ebenen li .auge { width: var(--ziel-touch); height: var(--ziel-touch); padding: 14px; } .ebenen li .gruppenzeichen { width: var(--ziel-touch); height: var(--ziel-touch); } .zoomwert { min-height: var(--ziel-touch); } .streifen button { min-height: var(--ziel-touch); } .stapelschild { min-height: var(--ziel-touch); } .stapelschild .auge { width: var(--ziel-touch); height: var(--ziel-touch); padding: 14px; } .stapelschild .sname { min-height: var(--ziel-touch); } .kimuster { width: var(--ziel-touch); height: var(--ziel-touch); padding: 8px; } } /* ============================================================ Nachgezogen aus Figma (24.09.2026, „alles fertig") ============================================================ */ /* D2: Mischmodus als Kurzname in der Ebenenzeile */ .ebenen li .emodus { flex: 0 0 auto; font: var(--stil-klein); color: var(--text-sekundaer); white-space: nowrap; } /* M3: Zeile ziehen ordnet um */ .ebenen li.zieht { z-index: 2; background: var(--grund-feld); box-shadow: var(--schatten-insel); cursor: grabbing; transition: none; } /* D3: Nummer am Stapelschild */ .stapelschild .snummer { min-width: 18px; text-align: right; font: var(--stil-zahl); color: var(--text-sekundaer); } .stapelschild.aktiv .snummer { color: var(--text-primaer); } /* D6: Maßschild unter der Vektorauswahl */ .masseschild { position: absolute; z-index: 8; padding: 2px var(--abstand-2); background: var(--akzent-marke); color: var(--text-auf-akzent); border-radius: 5px; font: var(--stil-zahl); white-space: nowrap; pointer-events: none; } /* Ruhe (F): Inseln gleiten 4 px weg (Figma, Konzept: 160 ms) */ /* nur breit: schmal ist die Spalte ein Blatt mit eigener Bewegung */ @media (min-width: 981px) { .kopf, .inselspalte, .fuss { transition: opacity 160ms var(--raus), transform 160ms var(--raus); } html.ruhig .kopf { transform: translateY(-4px); } html.ruhig .inselspalte { transform: translateX(4px); } html.ruhig .fuss { transform: translateY(4px); } } @media (prefers-reduced-motion: reduce) { html.ruhig .kopf, html.ruhig .inselspalte, html.ruhig .fuss { transform: none; } } /* Segmente: eine Auswahl als Knopfreihe (Umwandler-Format, Ausgabe-Größe) */ .segment { display: inline-flex; gap: 2px; padding: 2px; background: var(--grund-feld); border: 1px solid var(--linie-bedienung); border-radius: var(--radius-mittel); } .segment button { appearance: none; min-height: 28px; padding: 0 var(--abstand-3); background: none; border: 0; border-radius: var(--radius-klein); color: var(--text-sekundaer); font: var(--stil-beschriftung); cursor: pointer; transition: background-color 90ms var(--raus), color 90ms var(--raus); } @media (hover: hover) and (pointer: fine) { .segment button:hover { color: var(--text-primaer); } } .segment button[aria-pressed="true"] { background: var(--grund-leiste); color: var(--text-primaer); box-shadow: 0 0 0 1px var(--linie-standard); } .segment button:focus-visible { outline: 2px solid transparent; box-shadow: var(--fokusring); } label > .segment { display: flex; width: max-content; margin-top: var(--abstand-1); } select.segmentquelle { display: none; } /* D8: Stand je Zeile und Fußzeile des Umwandlers */ .wandlerzeile .wstatus.laeuft { color: var(--text-primaer); } .wandlerzeile .wstatus.laeuft::before { background: var(--akzent-marke); } .wandlerzeile .wstatus.wartet::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--linie-bedienung); } .wandlerzeile .wstatus.fehler { color: var(--status-warnung); } .wandlerzeile .wstatus.fehler::before { background: var(--status-warnung); } .wandlerfuss { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; padding: var(--abstand-3) var(--abstand-4); background: var(--grund-leiste); border: 1px solid var(--linie-standard); border-radius: var(--radius-gross); } .wandlerfuss .zahl { color: var(--text-sekundaer); } /* D7: Ausgabe als eigene Ansicht — links Vergleich, rechts Formate */ .licht-tag { color: var(--text-primaer); } .ausgabemodal { padding: var(--abstand-6); } .ausgabe { width: min(1240px, 100%); height: min(820px, 100%); display: flex; flex-direction: column; overflow: hidden; background: var(--grund-papier); color: var(--text-primaer); border: 1px solid var(--linie-standard); border-radius: var(--radius-gross); box-shadow: var(--schatten-blatt); } .ausgabekopf { display: flex; align-items: center; gap: var(--abstand-4); padding: var(--abstand-3) var(--abstand-5); border-bottom: 1px solid var(--linie-standard); } .ausgabetitel { display: flex; align-items: baseline; gap: var(--abstand-3); min-width: 0; } .ausgabetitel h3 { margin: 0; font: var(--stil-anzeige-mittel); font-size: 28px; line-height: 34px; } .ausgabetitel .zahl { color: var(--text-sekundaer); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ausgabeinhalt { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; } .vergleich { margin: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-5); } .vergleichflaeche { --teiler: 50%; position: relative; flex: 1; min-height: 200px; display: grid; place-items: center; overflow: hidden; background: conic-gradient(var(--schach-hell) 0 25%, var(--schach-dunkel) 0 50%, var(--schach-hell) 0 75%, var(--schach-dunkel) 0) 0 0 / 20px 20px; border-radius: var(--radius-mittel); border: 1px solid var(--linie-standard); } /* Beide Bilder füllen die Fläche mit object-fit: contain — damit liegen sie deckungsgleich, und der Teiler (Prozent der Fläche) schneidet beide an derselben Stelle. Kleine Bilder werden dabei vergrößert. */ .vergleichbild { position: absolute; inset: var(--abstand-4); line-height: 0; } .vergleichbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .vergleichbild #exErgebnis { clip-path: inset(0 0 0 var(--teiler)); } .vergleichlinie { position: absolute; top: 0; bottom: 0; left: var(--teiler); width: 2px; margin-left: -1px; background: var(--akzent-marke); box-shadow: 0 0 0 1px rgb(255 255 255 / .6); } .vergleichlinie::after { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--akzent-marke); border: 2px solid var(--weiss); } .vergleichflaeche > input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; } .vergleichflaeche:has(> input:focus-visible) { box-shadow: var(--fokusring); } .vergleichschilder { display: flex; justify-content: space-between; font: var(--stil-beschriftung); color: var(--text-sekundaer); } .vergleich figcaption { font: var(--stil-klein); color: var(--text-sekundaer); } .ausgabesteuer { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--abstand-3); padding: var(--abstand-5); border-left: 1px solid var(--linie-standard); background: var(--grund-leiste); } .ausgabesteuer .beschriftung { margin: 0; } .skalawahl { display: grid; gap: var(--abstand-2); } .skalawahl .segment { width: max-content; } .ausgabeknoepfe { display: flex; gap: var(--abstand-2); margin-top: auto; padding-top: var(--abstand-3); } .ausgabeknoepfe #exLos { flex: 1; } .ausgabehinweis { margin: 0; display: flex; align-items: center; gap: var(--abstand-2); font: var(--stil-klein); color: var(--text-sekundaer); } .ausgabehinweis .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-zweit); flex: 0 0 auto; } @media (prefers-reduced-motion: no-preference) { .modal.offen .ausgabe { animation: blattauf 190ms var(--raus); } } /* M3: Kopf und Hinweis des Blatts — nur schmal */ .blattkopf, .blatthinweis { display: none; } @media (max-width: 980px) { .inselspalte .blattkopf { display: flex; align-items: center; gap: var(--abstand-2); padding: 0 var(--abstand-2); min-height: 44px; touch-action: none; cursor: grab; } /* Der Titel steht schon im Kopf der Liste darunter (mit dem +-Knopf) */ .blattkopf strong { display: none; } /* Bei offenem Blatt erscheinen Meldungen oben, nicht über dem Blatt */ html:has(.inselspalte.offen) .toasts { bottom: auto; top: 72px; } .inselspalte .blatthinweis { display: block; margin: 0; padding: 0 var(--abstand-2); font: var(--stil-klein); color: var(--text-sekundaer); } .inselspalte > .blattkopf, .inselspalte > .blatthinweis { pointer-events: auto; } /* M2: Dock nennt Ebene und Anzahl, Zoom die Bildmaße */ #bBlatt .verlaufzahl { margin-left: 2px; } /* Figma M2: im Dock Ebenen und Zoom; Stapel steht im Blatt, der Verlauf in der Befehlszeile. + und − bleiben: die Bühne kennt keinen Zweifinger-Zoom. */ #bStapel, #bVerlauf, .dock > .trennstrich { display: none !important; } .dock { justify-content: space-between; } #raster .dock, #vektor .dock { width: 100%; } #bBlatt, #vBlatt { flex: 1; min-width: 0; justify-content: flex-start; } #bBlatt > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* D7 schmal: untereinander, alles scrollt */ .ausgabemodal { padding: 0; } .ausgabe { height: 100%; border-radius: 0; border: 0; } .ausgabeinhalt { display: flex; flex-direction: column; overflow-y: auto; } .vergleich, .ausgabesteuer { flex: 0 0 auto; } .vergleich { padding: var(--abstand-3); } .vergleichflaeche { min-height: 40vh; flex: 0 0 auto; } .ausgabesteuer { border-left: 0; border-top: 1px solid var(--linie-standard); overflow: visible; padding: var(--abstand-3) var(--abstand-4) var(--abstand-5); } .ausgabekopf { padding: var(--abstand-2) var(--abstand-3); gap: var(--abstand-2); flex-wrap: wrap; } .ausgabetitel { flex-wrap: wrap; row-gap: 0; } } @media (pointer: coarse) { .segment button { min-height: var(--ziel-touch); } } /* Stapel auf Touch und schmal: keine Tastenhinweise, dafür ein Knopf zurück */ .stapelhinweis .stapelzu { display: none; } .stapelschild .sname { min-width: 0; } @media (pointer: coarse), (max-width: 980px) { .stapelhinweis .nurtasten { display: none; } .stapelhinweis .stapelzu { display: inline-flex; } .stapelschild .smodus { display: none; } .stapelhinweis { white-space: nowrap; flex-wrap: nowrap; } } /* D8 schmal: Dateizeile zweizeilig (Name und Knopf oben, Größen und Stand darunter); Regler und Auswahlen volle Breite. Vorher schoben die Zeilen die Startseite seitlich aus dem Bild. */ @media (max-width: 980px) { .wandlerzeile { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "bild name knopf" "bild info info" "bild stand stand"; column-gap: var(--abstand-3); row-gap: 2px; align-items: center; padding: var(--abstand-2) var(--abstand-3); } .wandlerzeile img { grid-area: bild; align-self: start; } .wandlerzeile .wname { grid-area: name; } .wandlerzeile .winfo { grid-area: info; white-space: normal; } .wandlerzeile .wstatus { grid-area: stand; } .wandlerzeile .kn { grid-area: knopf; } .wandlersteuer > label, .wandlersteuer > label:has(> input[type=range]) { min-width: 0; flex: 1 1 100%; } .wandlersteuer .spacer { display: none; } .wandlerzone span { white-space: normal; } .wandlerfuss .kn { flex: 1 1 100%; } #start { overflow-x: hidden; } } /* Figma M2: auf dem Telefon zoomt man mit zwei Fingern (raster.js, vektor.js); im Dock stehen dafür die Bildmaße statt + und −. Mit schmalem Fenster am Rechner (feiner Zeiger) bleiben die Knöpfe. */ @media (max-width: 980px) and (pointer: coarse) { #bZoomWeg, #bZoomHin, #vZoomWeg, #vZoomHin { display: none !important; } .zoomwert[data-masse]::after { content: " · " attr(data-masse); color: var(--text-sekundaer); } } /* Start auf Touch: kein Ziehen und kein Strg V — der Hinweis entfällt */ @media (pointer: coarse) { .startablage .ablagetext { display: none; } }