/**
* PE Konfigurator — Stufe 1
* Ablage: wp-content/plugins/pe-configurator/assets/pe-configurator.css
*
* Enthält bewusst KEIN Layout des äußeren Rasters — keine Spalten, keine
* Abstände zwischen Visual und Optionen, keine maximale Breite. Das gehört
* in Bricks. Hier stehen nur Zustände, die CSS allein abbilden kann.
*
* Die Vorschau mit Rahmen- und Passepartout-Compositing ist Stufe 2 und
* steht am Ende dieser Datei als kommentiertes Gerüst — nicht aktiv.
*/
/* =========================================================
* Stellwerte
* ---------------------------------------------------------
* Neutralgrau statt Schwarz: funktioniert auf hellem UND dunklem
* Hintergrund. Die frühere Fassung war auf einem Dark Theme unsichtbar.
* Schriftgrößen sind relativ (em) — setz die Basisgröße in Bricks am
* Container, alles darunter skaliert mit.
* ======================================================= */
/* Die Stellwerte galten nur unter `.pe-configurator`.
*
* Die Raumvorschau baut ihre Optionsgruppen aber in `.pe-aus` — dort
* loesten `--pe-media-width` und `--pe-group-gap` zu NICHTS auf. Und
* eine Variable ohne Wert macht die ganze Angabe ungueltig: aus
* `grid-template-columns: var(--pe-media-width) 1fr` wurde gar keine
* Spaltenangabe (die Bilder massen sich selbst, 122 gegen 200 Pixel),
* aus `margin: 0 0 var(--pe-group-gap)` wurde null Abstand zwischen den
* Gruppen. Am 24.08.2026 beides gemessen.
*
* **Eine fehlende Variable faellt nicht auf einen Standardwert zurueck —
* sie nimmt die Regel mit.** Deshalb gelten die Stellwerte jetzt auch
* hier, und die wichtigsten Verwendungen tragen zusaetzlich einen
* Rueckfall. */
.pe-configurator,
.pe-aus,
[data-pe-configurator] {
--pe-border: rgba(128, 128, 128, 0.35);
--pe-border-hover: rgba(128, 128, 128, 0.75);
--pe-accent: currentColor;
--pe-selected-bg: rgba(128, 128, 128, 0.14);
--pe-group-gap: 2rem;
--pe-media-width: 42%;
/* 0, damit Werk, Bedienleiste und die Textzeilen darunter auf
derselben Kante stehen. Der Abstand zur Spalte gehört in Bricks an
den Container — sonst hätte das Werk einen Innenabstand, den die
MwSt-Zeile daneben nicht kennt, und nichts fluchtet. */
--pe-view-pad: 0rem;
}
/* =========================================================
* Optionsgruppen
* ======================================================= */
/* Jede Gruppe nimmt die VOLLE Breite ihres Containers.
---------------------------------------------------------
Der Sammelcontainer [data-pe-groups] ist ein Bricks-Block. Steht der
auf Flex — und Bricks-Blöcke stehen häufig auf Flex —, dann sind die
Gruppen Flex-Elemente und werden nach ihrem INHALT bemessen. Die
Rahmengruppe enthält ein breites Bild und wird breit, die
Formatgruppe enthält nur Text und wird schmaler.
Und weil die Spaltenbreite im Raster als Prozentwert dieser Breite
definiert ist, sind 42 % in der Formatgruppe dann schlicht weniger
Pixel als 42 % in der Rahmengruppe. Genau das war der Versatz, den
keine Rechnung einholen konnte: die Bezugsgröße war je Gruppe eine
andere.
Diese vier Zeilen zwingen alle Gruppen auf dieselbe Bezugsbreite —
unabhängig davon, was der Bricks-Block vorgibt. */
.pe-group {
border: 0;
padding: 0;
margin: 0 0 var(--pe-group-gap, 2rem);
box-sizing: border-box;
width: 100%;
flex: 1 1 100%;
grid-column: 1 / -1;
min-inline-size: 0;
font-size: inherit;
}
.pe-group__legend {
padding: 0;
/* Groesser und mit Luft davor: der Titel trennt zwei Gruppen
voneinander und stand zwischen Regler und naechstem Bild wie
eingequetscht. Simon am 24.08.2026: *„'Passepartout' Titel soll
größer sein."* */
margin: 2.2em 0 0.6em;
font-size: 0.95em;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.8;
}
/* Die erste Gruppe braucht den Abstand nach oben nicht. */
.pe-group:first-of-type > .pe-group__legend { margin-top: 0; }
/* Innenraum: EIN Raster für alle Gruppen.
---------------------------------------------------------
Zwei Spalten, an genau einer Stelle definiert. Links das
Übersichtsbild, rechts die Auswahlliste.
Vorher war das ein Flex-Container. Ein Flex-Container definiert aber
keine Spalten, er verteilt Platz: `flex: 1 1 auto` heißt „so breit wie
der Inhalt, dann wachsen". Bei einer Liste je Gruppe fällt das nicht
auf. Bei zwei Listen nebeneinander — den beiden Formatspalten —
verhandeln beide über ihren Inhalt, und die Spaltengrenze hängt dann
daran, wie lang gerade ein Preis ist. Genau daran sind drei Anläufe
gescheitert.
Im Raster liegen die Spaltenkanten fest, unabhängig vom Inhalt. Jede
Gruppe benutzt dieselbe Definition, also fluchtet alles miteinander,
ohne dass irgendwo etwas ausgeglichen werden müsste. */
.pe-group__inner {
display: grid;
/* Mit RUECKFALLWERT.
*
* `--pe-media-width` ist auf `[data-pe-configurator]` gesetzt und
* loeste in der Raumvorschau zu nichts auf — damit war die ganze
* Angabe ungueltig, und der Browser mass die Spalte am Bild. Ergebnis
* am 24.08.2026: Rahmenbild 122 Pixel breit, Passepartoutbild 200.
* Simon: *„Rahmen + Passepartoutbild nicht gleich breit."*
*
* Eine Variable ohne Rueckfall ist eine Angabe, die auch fehlen
* kann — und dann faellt nicht der Wert aus, sondern die Regel. */
grid-template-columns: var(--pe-media-width, 42%) 1fr;
/* Zwischen den Spalten viel, zwischen den Zeilen wenig: unter Bild
und Liste folgen die Regler, und die gehoeren dicht heran. Simon am
24.08.2026: *„Slider haben zuviel Abstand zu den Optionsbilder,
sollen direkt darunter liegen."* */
/* Zwischen den Spalten viel, zwischen den Zeilen fast nichts: unter
Bild und Liste folgen die Regler, und die gehoeren unmittelbar
heran. Simon am 24.08.2026: *„Bild > 'Rahmenbreite' > slider soll
geringere Abstände sein."* */
gap: .15rem 1.5rem;
align-items: start;
}
.pe-group__media {
/* Immer dieselbe Breite, gleich welches Bild darin liegt.
*
* Die Spalte ist zwar fest, das Bild darin richtete sich aber nach
* seinem eigenen Seitenverhaeltnis — Rahmenmuster und
* Passepartoutboegen sind unterschiedlich proportioniert, und die
* Gruppen sprangen dadurch in der Breite. Simon am 24.08.2026:
* *„Optionsbilder Rahmen / Passepartouts sollen immer gleich breit
* bleiben."* */
width: 100%;
grid-column: 1;
min-width: 0;
display: flex;
justify-content: flex-end;
}
/* ---- Die Eckenvorschau im Gruppenbild --------------------------------
*
* Sie liegt UEBER dem Katalogbild und verdeckt es, sobald sie einen
* Inhalt hat. Das Katalogbild bleibt darunter stehen: es zeigt die
* Materialqualitaet und ist der Rueckfall, solange kein Werk gerendert
* ist — im Portfolio-Overlay vor dem Aufbau, bei einem Werk ohne Bild.
*
* Der Zoom entsteht aus der Breite der Buehne, nicht aus `transform`:
* die Massekette im `.pe-frameset` rechnet in `cqw`, also waechst mit
* der Buehne auch das Rahmenprofil. Ein `transform: scale()` haette
* stattdessen die Pixel vergroessert — dasselbe Bild, nur unschaerfer. */
.pe-group__media { position: relative; }
.pe-ecke {
position: absolute;
inset: 0;
overflow: hidden;
container-type: inline-size;
/* Durchsichtig, nicht eingefaerbt: der Klon deckt den Kasten bei
* jedem gewoehnlichen Seitenverhaeltnis vollstaendig ab (bei 300 %
* Buehnenbreite erst ab einem Panorama breiter als 3,2:1 nicht mehr),
* und darunter liegt das Katalogbild. Eine geratene Hintergrundfarbe
* waere auf der einen Seite richtig und auf der anderen falsch —
* der Konfigurator laeuft auf einer dunklen Werkseite UND in einem
* Overlay. */
/* Die Farbe setzt `eckeAktualisieren()` — sie ist die des
Passepartouts und schliesst damit den Haarriss zwischen
Rahmen- und Innenebene optisch. Bis dahin durchsichtig, damit
ein leerer Kasten das Katalogbild zeigt. */
background: transparent;
pointer-events: none;
}
/* Steht ein Klon, bestimmt nicht mehr das Katalogbild die Groesse.
---------------------------------------------------------
Bis 2.190.0 bekam der Kasten seine Hoehe vom Bild darin — und die
beiden Katalogfotos haben verschiedene Seitenverhaeltnisse. Am
01.09.2026 auf live gemessen: Rahmen 1301x1209 (1,076) ergab einen
Kasten von 222x206, Passepartout 1448x1086 (1,333) einen von 222x166.
Vierzig Pixel Unterschied, ohne dass es dafuer einen Grund gaebe.
Simon: *„der Passepartout Detail frame ist niedriger als der Rahmen
frame, obwohl genug Platz da ist."*
Sobald eine Eckenvorschau steht, gilt deshalb ein festes Verhaeltnis
fuer BEIDE. **Quadratisch**, weil ein Eckausschnitt keine bevorzugte
Richtung hat: er zeigt oben und links gleich viel, gleich welches
Werk gerade darin steht. Nebenbei entspricht 222x222 fast genau dem
bisher hoeheren der beiden Kaesten — es springt also nichts.
Das Bild liegt dabei absolut und nimmt keinen Platz mehr; verdeckt
ist es ohnehin. `visibility` statt `display`, damit es geladen bleibt
und beim Wegfallen des Klons sofort wieder traegt. */
.pe-group__media:has(.pe-ecke .pe-frameset) { aspect-ratio: 1 / 1; }
.pe-group__media:has(.pe-ecke .pe-frameset) > img,
.pe-group__media:has(.pe-ecke .pe-frameset) > figure,
.pe-group__media:has(.pe-ecke .pe-frameset) > .brxe-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
visibility: hidden;
}
/* Ohne Inhalt unsichtbar — dann gilt das Katalogbild darunter.
* `:has()` statt `:empty`: der Kasten traegt immer seine Buehne, leer
* ist nur die Buehne. */
.pe-ecke:not(:has(.pe-frameset)) { display: none; }
.pe-ecke__buehne {
position: absolute;
top: 0;
left: 0;
/* Dreifach: genug, um Profil und Passepartoutrand zu erkennen, und
* wenig genug, dass noch ein Stueck Werk im Bild ist. */
width: 300%;
}
.pe-ecke__buehne .pe-frameset {
width: 100%;
max-width: none;
}
/* Was in der Ecke nichts zu suchen hat: das Glas spiegelt, der
* Vorgaengerrahmen blendet ueber — beides ist eine Bewegung der grossen
* Buehne und im Daumennagel nur Unruhe. */
.pe-ecke__buehne .pe-frameset__glass,
.pe-ecke__buehne .pe-frameset__frame--prev { display: none; }
.pe-group__media img,
.pe-group__media .brxe-image,
.pe-group__media figure {
display: block;
/* `width: 100%` statt `max-width`: sonst bleibt ein schmaleres Bild
schmal, und die Gruppen stehen unterschiedlich breit nebeneinander. */
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
}
/* Die Liste sitzt in der zweiten Spalte. Ohne Bild nimmt sie beide. */
.pe-group__list {
grid-column: 2;
min-width: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4em 0.6em;
align-content: flex-start;
align-items: flex-start;
}
.pe-group:not(.has-media):not(.pe-group--format) .pe-group__list {
grid-column: 1 / -1;
}
/* Mit Bild daneben untereinander, sonst wird die Spalte zu schmal. */
.pe-group.has-media .pe-group__list {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
}
/* Formate: zwei Listen in denselben zwei Rasterspalten.
Die linke belegt die Spalte der Gruppenbilder, die rechte die Spalte
der Auswahllisten — dieselben Kanten, dieselbe Breite, ohne dass
irgendwo etwas ausgeglichen werden müsste. */
.pe-group__list--slot-media {
grid-column: 1;
}
/* Ein Format je Zeile, wie in den Gruppen mit Bild. */
.pe-group--format .pe-group__list {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
}
/* Bezeichnung und Aufpreis stehen in einer Zeile, SOLANGE sie
hineinpassen — und brechen um, wenn nicht.
---------------------------------------------------------
Der vorherige Versuch erzwang mit flex-wrap: nowrap eine Zeile. Das
spart keinen Platz, es verschiebt ihn nur: der Aufpreis läuft dann
über die Spaltenkante hinaus und legt sich in der linken Spalte über
die Auswahlbox der rechten. Die Spalten fluchten dabei korrekt — es
ist der INHALT, der übersteht, und das sieht aus wie ein Versatz.
Umbruch ist hier die ehrlichere Lösung: eine zweite Zeile ist
sichtbar und harmlos, ein überlappender Betrag ist es nicht. */
.pe-group--format .pe-choice__text {
flex-wrap: wrap;
align-items: baseline;
column-gap: 0.5em;
}
/* Die Maßangabe selbst bricht nie mitten im Format um. */
.pe-group--format .pe-choice__name { white-space: nowrap; }
.pe-group--format .pe-choice__price { white-space: nowrap; }
@media (max-width: 700px) {
.pe-group__list--slot-media { grid-column: 1 / -1; }
}
/* Der Sammelcontainer legt die Gruppen SCHLICHT untereinander.
---------------------------------------------------------
Er ist ein Bricks-Block und bringt von dort eine Flex- oder
Rasterausrichtung mit. Sobald die Gruppen dadurch nach ihrem Inhalt
bemessen werden, sind sie unterschiedlich breit — gemessen 535 gegen
546 Pixel —, und weil die Spaltenbreite ein Prozentwert dieser Breite
ist, wandert die Spaltenkante mit. Fünf Pixel Versatz aus elf Pixeln
Gruppenbreite.
Blockfluss ist hier die richtige Anordnung: jede Gruppe nimmt die
volle Breite, alle dieselbe. Der Container hat keine andere Aufgabe —
er ist im Template ausdrücklich als leerer Sammelbehälter angelegt. */
[data-pe-groups] {
display: block !important;
}
/* Vom Bricks-Element gelieferte Gruppenbilder sind unsichtbar, solange
sie noch im Sammelcontainer liegen. Sobald das JS sie in die Gruppe
verschoben hat, sind sie kein direktes Kind mehr und erscheinen. */
[data-pe-groups] > [data-pe-group-media] {
display: none !important;
}
@media (max-width: 700px) {
.pe-group__inner { grid-template-columns: 1fr; }
.pe-group__media { justify-content: flex-start; }
.pe-group__list { grid-column: 1 / -1; }
.pe-group.has-media .pe-group__list { align-items: stretch; }
/* Gleicher Abstand zu beiden Rändern. Auf dem Desktop kommt er vom
Bricks-Container, auf dem Handy steht der Konfigurator dort ohne
Rand. Für .pe-view steht dieselbe Angabe weiter unten — hier wäre
sie wirkungslos, weil die Basisregel von .pe-view erst danach kommt
und mit ihrer padding-Kurzschreibweise alles zurücksetzt. */
.pe-group { padding-inline: var(--pe-mobile-pad, 1.25rem); }
}
/* =========================================================
* Auswahl-Element
* ---------------------------------------------------------
* Der Radio wird SICHTBAR gerendert, nicht versteckt. Die frühere
* Fassung blendete ihn aus und verließ sich auf Rahmen und Hintergrund
* — auf einem dunklen Theme war davon nichts zu sehen.
* ======================================================= */
.pe-choice {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.6em;
/* Enger als vorher: bei fuenf Rahmenfarben und vier
Passepartouttoenen wuchs die Liste sonst ueber die Bildhoehe
hinaus und die Regler rutschten weit nach unten. Simon am
24.08.2026: *„Alle Radiobuttons vertikal geringerer Abstand."* */
padding: 0.28em 0.7em;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pe-choice__input {
flex: 0 0 auto;
width: 1.05em;
height: 1.05em;
margin: 0.15em 0 0;
accent-color: var(--pe-accent);
cursor: pointer;
}
.pe-choice:hover {
border-color: var(--pe-border-hover);
}
.pe-choice.is-selected,
.pe-choice:has(.pe-choice__input:checked) {
border-color: var(--pe-accent);
background: var(--pe-selected-bg);
}
.pe-choice:focus-within {
outline: 2px solid var(--pe-accent);
outline-offset: 2px;
}
/* Gesperrte Optionen sind blass — aber NICHT ueber `opacity` am
* Elternelement.
*
* Deckkraft am Elternteil legt sich ueber alles darin, auch ueber den
* Infokasten, und laesst sich im Kind nicht zurueckholen: `opacity: 1`
* an einem Nachfahren hebt sie nicht auf. Der Kasten war deshalb
* durchscheinend und der Text darunter mitzulesen — Simon am 24.08.2026:
* *„Infobox nicht lesbar, weil auch transparent."*
*
* Also blass gemacht wird, was blass sein soll: Beschriftung, Notiz,
* Preis und der Auswahlknopf. Der Kasten bleibt deckend. */
/* Ein gesperrter Knopf in der Ansichtsleiste — dieselbe Sprache wie eine
gesperrte Option: gedaempft, aber da. Der Grund erscheint nach dem
Tippen in der Meldungszeile darunter. */
.pe-btn.is-blocked {
opacity: .4;
cursor: default;
}
.pe-btn.is-blocked:hover { border-color: var(--pe-line, currentColor); }
.pe-choice.is-blocked {
cursor: not-allowed;
}
.pe-choice.is-blocked .pe-choice__name,
.pe-choice.is-blocked .pe-choice__note,
.pe-choice.is-blocked .pe-choice__price,
.pe-choice.is-blocked .pe-choice__swatch,
.pe-choice.is-blocked .pe-choice__input { opacity: .4; }
.pe-choice.is-blocked:hover { border-color: transparent; }
/* =========================================================
* Swatch — nur wenn eingeschaltet
* ======================================================= */
.pe-choice__swatch {
flex: 0 0 auto;
width: 2em;
height: 2em;
border-radius: 1px;
background-size: cover;
background-position: center;
box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.3);
}
.pe-choice__swatch--plain {
background: repeating-linear-gradient(
45deg, transparent, transparent 4px,
rgba(128, 128, 128, 0.25) 4px, rgba(128, 128, 128, 0.25) 8px
);
}
/* =========================================================
* Beschriftung — erbt die Schriftgröße vom Container
* ======================================================= */
/* Name und Aufpreis stehen in einer Zeile, der Zusatztext bricht darunter
um. Untereinander kostete jede Option eine Zeile mehr — bei fünf Gruppen
summiert sich das auf einen halben Bildschirm, den niemand braucht. */
.pe-choice__text {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
column-gap: 0.6em;
line-height: 1.35;
min-width: 0;
}
.pe-choice__name { font-size: 1em; }
.pe-choice__price { font-size: 0.85em; opacity: 0.7; font-variant-numeric: tabular-nums; }
/* Eigene Zeile — der Zusatztext ist oft ein ganzer Satz. */
.pe-choice__note { flex: 1 1 100%; font-size: 0.8em; opacity: 0.6; }
/* Sperrgrund direkt an der Option, in ganzer Breite unter dem Namen. */
/* Der Sperrgrund steht hinter einem „i".
*
* In der schmalen Optionsspalte brach er sonst in vier bis sechs kurze
* Zeilen um. Das Zeichen erscheint nur an gesperrten Zeilen; der Satz
* beim Ueberfahren, bei Tastaturfokus und auf Tippen. */
.pe-choice__info {
display: none;
flex: 0 0 auto;
width: 1.4em;
height: 1.4em;
align-items: center;
justify-content: center;
margin-left: .4em;
font-size: .74em;
font-style: italic;
line-height: 1;
border: 1px solid currentColor;
border-radius: 50%;
opacity: .6;
cursor: help;
}
.pe-choice.is-blocked .pe-choice__info { display: inline-flex; }
.pe-choice.is-blocked:hover .pe-choice__info { opacity: 1; }
.pe-choice__reason {
position: absolute;
top: calc(100% - .2em);
left: 0;
right: 0;
z-index: 7;
width: max(100%, 13rem);
padding: .7em .9em;
font-size: 0.78em;
line-height: 1.45;
color: #f2f2f2;
background: #0d0d0d;
border: 1px solid rgba(255, 255, 255, .55);
border-radius: 3px;
box-shadow: 0 .5rem 1.4rem rgba(0, 0, 0, .55);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .15s, visibility 0s linear .15s;
}
.pe-choice.is-blocked:hover .pe-choice__reason,
.pe-choice.is-blocked:focus-within .pe-choice__reason,
.pe-choice.zeigt-grund .pe-choice__reason {
opacity: 1;
visibility: visible;
transition: opacity .15s, visibility 0s;
}
/* Die letzte Zeile einer Liste haette ihren Kasten sonst ausserhalb. */
.pe-choice:last-child .pe-choice__reason { top: auto; bottom: calc(100% - .2em); }
.pe-choice__price:empty,
.pe-choice__note:empty { display: none; }
/* Sperrgrund steht EINMAL unter der Gruppe, nicht an jeder Option.
Vorher stand derselbe Satz fünfmal untereinander. */
.pe-group__reason {
margin-top: 0.6em;
font-size: 0.8em;
line-height: 1.45;
opacity: 0.75;
max-width: 44ch;
}
.pe-group__reason:empty { display: none; }
/* =========================================================
* Preis und Hinweise
* ======================================================= */
.pe-total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.pe-total__value {
font-variant-numeric: tabular-nums;
font-size: 1.9em;
}
.pe-vat,
.pe-hint,
.pe-price-from__vat,
.pe-price-from__detail,
.pe-edition__line--muted {
font-size: 0.8em;
opacity: 0.6;
line-height: 1.5;
}
.pe-price-from {
font-variant-numeric: tabular-nums;
}
.pe-edition {
display: flex;
flex-direction: column;
gap: 0.15rem;
font-size: 0.9em;
}
.pe-edition--soldout { opacity: 0.6; }
/* =========================================================
* Ausverkaufte Edition
* ======================================================= */
.pe-soldout {
padding: 1.25rem;
border: 1px solid var(--pe-border);
border-radius: 2px;
}
.pe-soldout__title {
margin: 0 0 0.4rem;
font-size: 1.05em;
}
.pe-soldout__body {
margin: 0;
font-size: 0.9em;
opacity: 0.7;
line-height: 1.5;
}
/* Das Anfrageformular bleibt bestehen, aber ohne Preisbezug.
Optionsgruppen und Preis verschwinden — die Warteliste ist der
verbleibende Zweck des Formulars. */
.pe-is-soldout [data-pe-groups],
.pe-is-soldout [data-pe-total],
.pe-is-soldout .pe-total,
.pe-is-soldout .pe-vat {
display: none;
}
/* =========================================================
* Reduced motion
* ======================================================= */
@media (prefers-reduced-motion: reduce) {
.pe-choice { transition: none; }
}
/* =========================================================
* VOLLVORSCHAU
* ---------------------------------------------------------
* Ebenen von außen nach innen, jede mit Prozent-Padding. Prozent-Padding
* bezieht sich auf ALLEN vier Seiten auf die Breite des Elternelements —
* deshalb ist jeder Wert direkt aus den cm-Angaben ableitbar und die
* Vorschau stimmt bei jedem Seitenverhältnis, ohne dass JS misst.
*
* border-width braucht eine echte Länge, keine Prozentangabe. cqw löst
* das: 1cqw ist ein Prozent der Containerbreite, aber als Länge.
* ======================================================= */
.pe-frameset {
container-type: inline-size;
position: relative;
width: 100%;
--pe-frame-pad: 0;
--pe-mount-pad: 0;
--pe-paper-x: 0;
--pe-paper-y: 0;
--pe-mount-color: transparent;
--pe-paper-color: transparent;
--pe-frame-image: none;
--pe-frame-slice: 0;
--pe-frame-filter: none;
--pe-frame-repeat: round;
--pe-art-ratio: auto;
/* Der Schatten kommt pro Raum aus dem Backend. Die Vorgabe hier gilt
in der Werkansicht und bei eigenen Fotos des Nutzers. */
filter: var(--pe-shadow, drop-shadow(2.1cqw 1.2cqw 1.4cqw rgba(0, 0, 0, 0.34)));
transition: filter 0.25s ease;
}
/* Prozent-Padding, unverändert und ohne Mischrechnung.
Der frühere Versuch, den Haarriss über max(0px, calc(… - 1px)) zu
schließen, mischte Prozent und Pixel innerhalb einer Padding-Angabe.
Das ist heikel und war der Verdacht für die verschwundene
Passepartout-Fläche. Die Überlappung macht jetzt ein negativer
Außenabstand am KIND — dieselbe Wirkung, gewöhnliches CSS. */
.pe-frameset__inner { padding: calc(var(--pe-frame-pad) * 1%); }
/* Farbe und Anschnitt blenden über, die Maße folgen in derselben Zeit.
Ohne das springt die Passepartout-Fläche schlagartig ins Bild. */
.pe-frameset__mount {
/* Vier Seiten, nicht eine.
*
* Prozentwerte beziehen sich in CSS bei allen vier Seiten auf die
* BREITE — das Skript rechnet deshalb ueberall durch die
* Passepartoutbreite. Rueckfall auf den einen Wert, damit aeltere
* Zustaende nichts kaputtmachen. */
padding:
calc(var(--pe-mount-pad-o, var(--pe-mount-pad)) * 1%)
calc(var(--pe-mount-pad-r, var(--pe-mount-pad)) * 1%)
calc(var(--pe-mount-pad-u, var(--pe-mount-pad)) * 1%)
calc(var(--pe-mount-pad-l, var(--pe-mount-pad)) * 1%);
background: var(--pe-mount-color);
transition: background-color 0.35s ease, padding 0.35s ease;
}
.pe-frameset__paper {
transition: background-color 0.35s ease, padding 0.35s ease;
}
.pe-frameset__paper::after {
transition: box-shadow 0.35s ease;
}
.pe-frameset__inner {
transition: padding 0.35s ease;
}
/* Ein Pixel unter die Rahmenebene geschoben. Die Rahmenebene liegt
absolut und misst in cqw, die Innenebene im Fluss und in Prozent —
beide runden unabhängig auf ganze Gerätepixel, und wo sie um einen
halben Pixel auseinanderfallen, malt keine von beiden. Genau das war
der Haarriss, durch den der Seitenhintergrund schien.
ABER NIE WEITER ALS DER RAHMEN BREIT IST.
---------------------------------------------------------
Ein fester Pixel setzt voraus, dass der Rahmenring breiter als ein
Pixel ist. In der flachen Ansicht stimmt das immer: die Bühne ist
rund 600 px breit, der Ring damit etwa sieben. In der verzerrten
Ansicht nicht: dort ist die LAYOUTbox nur rund 150 px breit — die
Matrix macht die Grösse, nicht das Layout —, und der Ring misst
je nach Profil 0,4 bis 1,7 px. Wird er schmaler als ein Pixel,
schiebt dieser Rand das Passepartout über den Aufbau HINAUS, und
die Matrix vergrössert den Überstand mit.
Am 27.08.2026 gemessen, Rahmen 10 mm auf Passepartout 140 mm:
Innenabstand 0,672 px, Überstand oben/links/unten/rechts
+1,15 / +0,62 / +0,76 / +0,36 px — in Chrome und in Safari
dieselben Zahlen. Sichtbar war es nur in Safari, weil Chrome die
Rahmenbreite auf 1 px aufrundet (Safari auf 0,5) und den Rest
wegrundet. Der Fehler lag also nie in Safari; Safari hat ihn
gezeigt.
`min()` bindet den Flicken an das, was er flicken soll. Ist der
Ring breiter als ein Pixel, bleibt es beim Pixel und in der
flachen Ansicht ändert sich nichts. Ist er schmaler, reicht das
Passepartout höchstens bis an die Aussenkante — nie darüber. Und
ohne Rahmen (`--pe-frame-pad: 0`) ist der Rand null: dort gibt es
keinen Ring, unter den sich etwas schieben liesse. */
.pe-frameset__mount {
margin: calc(-1 * min(1px, var(--pe-frame-pad) * 1cqw));
}
.pe-frameset__paper {
padding: calc(var(--pe-paper-y) * 1%) calc(var(--pe-paper-x) * 1%);
background: var(--pe-paper-color);
}
.pe-frameset__art {
display: block;
width: 100%;
height: auto;
aspect-ratio: var(--pe-art-ratio);
object-fit: cover;
/* Auch der ZUSCHNITT laeuft weich.
* ---------------------------------------------------------
* Jede Option, die den Falz aendert, aendert das Verhaeltnis der
* Sichtflaeche: `artRatio` rechnet mit `iw - 2*cutX` durch
* `ih - 2*cutY`. Rundum steht alles auf `.35s` — Passepartoutbreite,
* Farbe, Anschnitt —, nur das Bild sprang. Man sah es als kurzes
* Zucken im Motiv, waehrend der Karton noch wuchs.
*
* `aspect-ratio` ist ein interpolierbarer Wert, und beide Motoren
* koennen es. Am 29.08.2026 an einem eigens gebauten Fall gemessen,
* 2:1 auf 1:1 ueber 0,3 s: Chrome 151 laeuft 100 -> 108 -> 117 ->
* ... -> 200, WebKit 100 -> 115 -> 134 -> ... -> 200. Beide
* interpolieren, keiner springt. */
transition: aspect-ratio 0.35s ease;
}
/* Schnittkante des Passepartouts — die Tiefenwirkung, für die sonst ein
Foto nötig wäre.
Sie sitzt auf der PAPIER-Ebene mit inset: 0, nicht auf der Mount-Ebene
mit einem Prozent-Inset. Prozentwerte in `inset` lösen vertikal gegen
die Höhe auf, horizontal gegen die Breite — die Linie wäre bei
Panoramaformaten sichtbar verschoben. Derselbe Fehler steckte in der
allerersten Fassung dieser Datei. */
.pe-frameset__paper { position: relative; }
.pe-frameset__paper::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 0 0.12cqw rgba(0, 0, 0, 0.22);
}
/* ---------------------------------------------------------
* Anschnitt (Schrägschnitt) des Passepartouts
* ---------------------------------------------------------
* Ein Passepartout wird im 45-Grad-Winkel geschnitten. Die dabei
* entstehende Schnittfläche steht schräg im Raum — und weil das Fenster
* eine VERTIEFUNG ist, zeigen die vier Flächen in vier Richtungen: die
* obere nach unten, die untere nach oben, die linke nach rechts, die
* rechte nach links.
*
* Genau deshalb ist eine Hoch- und eine Längsseite heller als die
* Passepartoutfläche und die beiden gegenüberliegenden dunkler. Bei
* Licht von links oben sind das unten und rechts hell, oben und links
* dunkel — bei einer Vertiefung umgekehrt zu einer Erhebung.
*
* Umgesetzt als BORDER, nicht als Innenschatten.
* ---------------------------------------------------------
* Ein Rahmen aus vier Kanten trifft sich in der Ecke auf Gehrung — das
* ist die Geometrie eines Schrägschnitts, unmittelbar und ohne
* Nachhilfe. Vier Innenschatten dagegen sind vier weiche Verläufe, die
* einander überlagern; damit lässt sich „diese Seite heller als die
* Fläche, jene dunkler" nicht sauber sagen, weil jeder Verlauf über die
* ganze Kante reicht. Drei Anläufe mit gestapelten Schatten sind genau
* daran gescheitert.
*
* Die vier Farben rechnet das JS aus Anschnittfarbe und Lichtwinkel des
* Raumes. Alle Maße in cqw, damit sie in jedem Format stimmen.
* ------------------------------------------------------- */
.pe-frameset.has-mount .pe-frameset__paper::after {
border-style: solid;
/* VIER Breiten, nicht eine.
---------------------------------------------------------
Der Anschnitt liegt im Karton VERTIEFT. Bei schrägem Blick sieht
man deshalb von der fernen Seite mehr und von der nahen weniger —
umgekehrt als bei der Rahmenflanke, die vorsteht. Ein Band mit
überall gleicher Breite dreht das um, weil die Perspektive die
nahe Seite vergrössert. Simon am 27.08.2026: *„rein die Verzerrung
macht den Anschnitt in der Nähe breiter = es sieht perspektivisch
nicht korrekt aus."*
Die Faktoren rechnet `bevelFaktoren()`. Ohne Verzerrung stehen
alle vier auf demselben Wert, und die Rückfallkette endet bei der
alten einen Breite — an dieser Regel ändert sich für die flache
Ansicht also nichts. */
border-width:
var(--pe-bevel-w-oben, var(--pe-bevel-width, 0.42cqw))
var(--pe-bevel-w-rechts, var(--pe-bevel-width, 0.42cqw))
var(--pe-bevel-w-unten, var(--pe-bevel-width, 0.42cqw))
var(--pe-bevel-w-links, var(--pe-bevel-width, 0.42cqw));
border-color:
var(--pe-bevel-top, #fffdf8)
var(--pe-bevel-right, #fffdf8)
var(--pe-bevel-bottom, #fffdf8)
var(--pe-bevel-left, #fffdf8);
/* Haarfeine Trennlinie zum Werk. Innenschatten werden am
Innenrand des Rahmens beschnitten — sie sitzt also genau dort,
wo der Anschnitt auf das Bild trifft.
Dahinter der weiche Schlagschatten, den der Karton auf das Werk
wirft. Er ist der Grund, warum ein Passepartout auf einem Foto
plastisch wirkt und auf dem Bildschirm ohne ihn flach.
ZUR BREITE, weil sie leicht falsch gewaehlt wird: in Philipps
Referenzfoto (`assets/gruppen/passepartout_02.png`) laeuft der
Schatten ueber 96 von 1448 Pixeln, also 6,6 % der Bildbreite. Das
waere hier voellig falsch — das Foto ist eine Makroaufnahme unter
flachem Winkel. Massgeblich ist die Physik: ein Museumskarton ist
knapp 2 mm dick und wirft bei weichem Licht drei bis fuenf
Millimeter Schatten. Auf einem Werk von 100 cm Breite sind das
0,3 bis 0,5 %, und in dieser Groessenordnung steht der Wert.
In cqw, damit er in jedem Format gleich bleibt. */
box-shadow:
inset 0 0 0 0.04cqw rgba(0, 0, 0, 0.35),
inset 0 0 0.45cqw 0.12cqw rgba(0, 0, 0, 0.30),
inset 0 0 1.1cqw 0 rgba(0, 0, 0, 0.14);
}
/* Schattenfuge: das Werk schwebt, der Spalt liegt im Schatten.
Kein Anschnitt — dort ist kein Material, das man anschneiden könnte. */
.pe-frameset.is-shadowgap .pe-frameset__paper::after {
border: 0;
box-shadow:
inset 0 0 0 0.1cqw rgba(0, 0, 0, 0.75),
inset 0 0 0.8cqw 0.2cqw rgba(0, 0, 0, 0.55),
0 0 1.2cqw 0.3cqw rgba(0, 0, 0, 0.6);
}
/* Überblendebene für den Rahmenwechsel.
border-image-source lässt sich nicht animieren — ein Rahmenwechsel
springt deshalb hart um. Die zweite Ebene hält den alten Rahmen fest
und blendet ihn aus, während darunter schon der neue steht. Dasselbe
Verfahren wie beim Szenenwechsel. */
.pe-frameset__frame--prev {
opacity: 0;
transition: opacity 0.35s ease;
z-index: 2;
}
/* Rahmen als eigene Ebene — sonst würde sein Farbfilter das Werk mit
einfärben. 9-Slice: Ecken unverzerrt, Kanten gekachelt. */
.pe-frameset__frame {
position: absolute;
inset: 0;
pointer-events: none;
border-style: solid;
/* Die vier Flaechen des lackierten Profils. Ein CSS-Rahmen laesst
sie von sich aus auf GEHRUNG zusammenlaufen — das ist der ganze
Grund, warum die einfarbigen Rahmen seit 2.189.0 keine
Neunerteilung mehr benutzen. Bei einem Rahmen MIT Bild stehen
alle vier auf `transparent`; dann malt allein `border-image`. */
border-color:
var(--pe-profil-oben, transparent)
var(--pe-profil-rechts, transparent)
var(--pe-profil-unten, transparent)
var(--pe-profil-links, transparent);
border-width: calc(var(--pe-frame-pad) * 1cqw);
border-image-source: var(--pe-frame-image);
border-image-slice: var(--pe-frame-slice);
border-image-repeat: var(--pe-frame-repeat, round);
border-image-width: calc(var(--pe-frame-pad) * 1cqw);
filter: var(--pe-frame-filter);
/* Der Falzschatten — die Kante, an der der Rahmen auf das
Passepartout trifft.
`inset` bezieht sich auf die PADDING-Box, und die ist bei diesem
Element genau die Rahmenoeffnung. Der Schatten liegt also innen am
Falz und faellt zur Bildmitte hin auf null. Weil die Rahmenebene
die oberste ist, faellt er auf das Passepartout — dorthin, wo ihn
ein Rahmen im Streiflicht auch wirft.
Das ist der Anteil, der Tiefe wirklich verkauft: ein flaechig
lackiertes Profil ohne diese Kante sieht aufgeklebt aus, mit ihr
sitzt es im Rahmen. */
box-shadow: var(--pe-falz-schatten, none);
}
/* Nur wo ein Rahmen ist. Ohne Rahmen und bei Alu-Dibond gaebe es keinen
Falz — ein Schatten dort waere ein Rand, den niemand bestellt hat. */
.pe-frameset:not(.is-alu):not(.ohne-rahmen) .pe-frameset__frame {
--pe-falz-schatten:
inset 0 0 0.28cqw rgba(0, 0, 0, 0.55),
inset 0.22cqw 0.22cqw 0.75cqw rgba(0, 0, 0, 0.30);
}
/* Museumsglas: dezente Reflexion, kein Kitsch. inset in cqw statt Prozent,
weil Prozent vertikal gegen die Höhe auflöst und der Reflex sonst bei
Panorama verrutscht. */
.pe-frameset__glass {
position: absolute;
inset: calc(var(--pe-frame-pad) * 1cqw);
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
background: linear-gradient(
118deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.04) 26%,
rgba(255, 255, 255, 0) 46%
);
}
.pe-frameset.has-glass .pe-frameset__glass { opacity: 1; }
/* Alu-Dibond: randlos, kein Rahmen, dafür deutlich abgesetzt von der Wand. */
/* Alu-Dibond hängt auf Abstandhaltern und steht deutlich weiter von der
Wand ab als ein Rahmen. Derselbe Lichteinfall, größerer Wurf. */
.pe-frameset.is-alu {
filter: var(--pe-shadow-alu, drop-shadow(3cqw 1.7cqw 1.75cqw rgba(0, 0, 0, 0.47)));
}
.pe-frameset.is-alu .pe-frameset__art {
box-shadow: 0 0 0 0.1cqw rgba(255, 255, 255, 0.08);
}
/* =========================================================
* DER Anzeigebereich
* ---------------------------------------------------------
* Werkansicht: das Composite füllt die volle Spaltenbreite, immer.
* Raumansicht: dieselbe Box, Szene im Hintergrund, Werk maßstäblich.
* ======================================================= */
/* Eigener Container, EIN Kind des Bricks-Blocks.
Die vier Eigenschaften unter `padding` sind kein Zierrat: sie sorgen
dafür, dass dieser Container die volle Breite bekommt, egal ob der
Bricks-Block eine Flex-Reihe, eine Flex-Spalte oder ein Raster ist.
`grid-column: 1 / -1` greift nur im Raster und ist sonst wirkungslos. */
.pe-view {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.4rem;
padding: var(--pe-view-pad, 1.5rem);
width: 100%;
flex: 1 1 100%;
grid-column: 1 / -1;
justify-self: stretch;
align-self: stretch;
}
.pe-view > * { min-width: 0; }
/* [hidden] MUSS gewinnen.
Das UA-Stylesheet setzt [hidden] { display: none }, aber jede eigene
display-Angabe schlägt es — und mehrere Ebenen hier haben eine.
Historie: dieselbe Ursache hat das Szenenbild als zweites Flex-Kind
neben dem Werk stehen lassen — beide mit width:100%, beide auf die
Hälfte geschrumpft, 316 von 631 Pixeln. Das Szenenbild liegt deshalb
inzwischen absolut und arbeitet mit Deckkraft statt mit hidden; für
Thumbleiste, Hinweis und Maßstabsfeld gilt die Regel weiter. */
.pe-view [hidden],
.pe-lightbox [hidden] { display: none !important; }
/* Die Höhe kommt als Pixelwert aus dem JS, damit der Wechsel zwischen
Werk- und Raumansicht laufen kann: das Seitenverhältnis der Box
wechselt dabei vom gerahmten Werk auf das Raumfoto, und „auto" ist
nicht animierbar. */
.pe-view__frame {
position: relative;
width: 100%;
/* Zentriert, sobald das JS die Breite begrenzt hat — bei sehr hohen
Formaten ist die Bühne schmaler als die Spalte. */
margin-inline: auto;
/* Die Größenänderung beim Formatwechsel läuft weich. Der Weg ins
Vollbild NICHT über diese Angabe — dort übernimmt eine
Transform-Animation, die von der tatsächlichen Position ausgeht.
Beides gleichzeitig ergab das unsaubere Doppelspiel. */
transition: height 0.4s ease;
/* Nicht zusammendruecken lassen.
*
* Das Skript rechnet eine Hoehe und schreibt sie hin. Steht die Buehne
* in einem Flex-Behaelter — im Overlay tut sie das —, ist sie ein
* Flex-Element mit `flex-shrink: 1` und wird bei Platzmangel unter
* diese Hoehe gedrueckt. Der Rahmen darin richtet sich nach der
* BREITE und schrumpft nicht mit; er steht dann unten heraus.
*
* Am 25.08.2026 im Overlay gemessen: Inline 371,3 px, berechnet
* 363,3 — acht Pixel weggedrueckt, und der Rahmen brauchte 393. */
flex-shrink: 0;
}
.pe-view__frame.is-flipping { transition: none; }
/* Das Szenenfoto liegt absolut und wird ein- und ausgeblendet.
Es darf NIE im Fluss stehen: als zweites Flex-Kind neben dem Werk hat
es die Bühne halbiert — das war der Fehler, der die Werkansicht drei
Runden lang zerlegt hat. */
.pe-view__room-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.pe-view__frame.is-room .pe-view__room-bg { opacity: 1; }
/* Überblendebene für den Szenenwechsel. Liegt über dem Hintergrundfoto,
aber unter dem Werk, und zeigt beim Wechsel kurz das vorherige Foto.
In der Werkansicht ganz aus dem Weg. */
.pe-view__room-fade {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s ease;
}
.pe-view__frame:not(.is-room) .pe-view__room-fade { display: none; }
/* Werkansicht: normaler Fluss, volle Breite.
Breite UND Position laufen weich, damit ein Szenenwechsel mit anderem
Aufhängepunkt nicht springt. Beim Ziehen des eigenen Fotos wäre das
Nachlaufen störend — dafür die Klasse is-dragging. */
.pe-view__slot {
width: 100%;
margin-inline: auto;
transition: width 0.35s ease, left 0.35s ease, top 0.35s ease;
/* Das Werk wird gezogen, nicht ausgewaehlt.
*
* Die Zieh-Geste beginnt mit 320 ms Halten (`HOLD_MS` in
* `enableDrag()`). Genau dieses Halten ist auf iOS ueber einem
* `` die Geste, die das Kontextmenue oeffnet — „Bild sichern",
* „Kopieren", „Teilen". Der Besucher haelt, um das Werk an die Wand
* zu schieben, und bekommt statt dessen ein Blatt vor das Bild
* geschoben; das Ziehen faengt gar nicht erst an.
*
* `-webkit-touch-callout: none` schaltet dieses Blatt ab. Die
* Auswahl dazu, weil ein Halten sonst die blaue Markierung
* aufzieht und der Finger beim Ziehen Text markiert statt das Werk
* zu bewegen. Und die Antipp-Farbe, weil Android sonst bei jedem
* Zieh-Anfang kurz aufblitzt.
*
* Nur hier, nicht am ganzen Konfigurator: ueberall sonst darf
* markiert und kopiert werden — ein Preis, ein Mass, ein Titel
* sind Text, den jemand mitnehmen koennen soll. */
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.pe-view__slot.is-dragging { transition: none; }
/* Der Rahmenbereich zentriert das Composite in der Werkansicht. */
.pe-view__frame:not(.is-room) {
display: flex;
align-items: center;
justify-content: center;
}
/* Raumansicht: absolut, Breite maßstäblich zur Wandbreite. */
/* Nach dem Ausrichten steht das verzerrte Foto über die Bühne hinaus —
der Zoom deckt die Bühne ab, die Überstände müssen weg. Nur in der
Raumansicht, damit der Schlagschatten des Werks in der Werkansicht
nicht angeschnitten wird. */
.pe-view__frame.is-room { overflow: hidden; }
.pe-view__frame.is-room .pe-view__slot {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* KEIN touch-action: none mehr.
---------------------------------------------------------
Es hat auf dem Handy das Scrollen blockiert, sobald ein eigenes Foto
geladen war: jede Berührung, die auf dem Werk begann, war für das
Verschieben reserviert, und das Werk nimmt in der Raumansicht einen
großen Teil der Fläche ein. Ergebnis: die Seite ließ sich an genau
der Stelle nicht mehr bewegen, an der man nachsehen will, ob die
Einstellung passt.
Verschieben per Finger übernimmt jetzt niemand — dafür gibt es die
Regler, die ohnehin genauer sind. Mit der Maus bleibt das Ziehen. */
.pe-view__frame.is-user .pe-view__slot { cursor: grab; }
.pe-view__frame.is-user .pe-view__slot:active { cursor: grabbing; }
/* Das markierte Werk.
*
* Bis 2.154.0 hiess die Klasse `is-armed` und erschien erst NACH 320 ms
* Halten — ein Zeichen, das kommt, wenn man es nicht mehr braucht.
* Jetzt erscheint es beim ersten Tipp und sagt: ab hier gehoert die
* Geste dem Werk.
*
* Die vier Ecken sind der eigentliche Hinweis. Eine Kontur allein sagt
* „ausgewaehlt", Eckwinkel sagen „fassbar" — und genau das hat den drei
* Testpersonen von Philipp gefehlt. */
.pe-view__slot.is-markiert {
outline: 2px solid rgba(255, 255, 255, 0.85);
outline-offset: 0.4cqw;
}
.pe-view__slot.is-markiert::after {
content: '';
position: absolute;
inset: -0.4cqw;
pointer-events: none;
background:
linear-gradient(#fff, #fff) 0 0 / 2.2cqw 2px no-repeat,
linear-gradient(#fff, #fff) 0 0 / 2px 2.2cqw no-repeat,
linear-gradient(#fff, #fff) 100% 0 / 2.2cqw 2px no-repeat,
linear-gradient(#fff, #fff) 100% 0 / 2px 2.2cqw no-repeat,
linear-gradient(#fff, #fff) 0 100% / 2.2cqw 2px no-repeat,
linear-gradient(#fff, #fff) 0 100% / 2px 2.2cqw no-repeat,
linear-gradient(#fff, #fff) 100% 100% / 2.2cqw 2px no-repeat,
linear-gradient(#fff, #fff) 100% 100% / 2px 2.2cqw no-repeat;
}
.pe-view__frame.is-user .pe-view__slot:active { cursor: grabbing; }
/* =========================================================
* Bedienleiste — gleiche Höhe, feste Box
* ---------------------------------------------------------
* height statt min-height und box-sizing: border-box. Mit min-height
* und gemischten Elementtypen (button neben label) fallen die Höhen
* auseinander, sobald die Zeilenhöhe abweicht.
* ======================================================= */
/* Links Knöpfe und Thumbs, rechts Preis und Anfragen.
Der Preisblock nimmt nur die Breite, die er braucht; die linke Spalte
bekommt den Rest und bricht bei schmalem Fenster für sich um. */
.pe-view__actions {
/* Ueber der Buehne, nicht darunter.
*
* `.pe-frameset` steht im Fluss mit `width: 100%` und einer
* Hoehe aus `aspect-ratio`. Rechnet die Buehne eine kleinere
* Hoehe aus als der Rahmen braucht — und sei es nur fuer die
* Dauer eines Bildes —, laeuft der Rahmen nach unten heraus und
* legt sich ueber die Knoepfe. Beschnitten wird nicht: der
* Schlagschatten des Rahmens gehoert zum Bild und darf ueber die
* Buehne hinausragen.
*
* Diese zwei Zeilen sind der Gurt zum Hosentraeger von
* `pe:neu-einpassen` beim Oeffnen des Overlays: selbst wenn
* einmal etwas ueberlaeuft, bleiben die Knoepfe sichtbar und
* anklickbar. Simon am 29.08.2026 im Portfolio gesehen. */
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem 1.5rem;
}
.pe-view__barcol {
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1 1 22em;
min-width: 0;
}
.pe-view__bar {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.5rem;
}
/* Der Block nimmt die volle Breite der Spalte — seit 2.160.0.
*
* Bis dahin stand hier `flex: 0 0 auto`: „so breit wie das breiteste
* Kind". Solange das der Preis war, stimmte das. Seit die Werkklasse mit
* darin haengt, war es je nach Werk deren Kopfzeile — und die ist
* unterschiedlich lang. Simon am 31.08.2026 mit drei Bildschirmfotos:
* *„er aendert mit der Breite der Editionsinfo seine Breite … ergibt
* schmalen Text oder immer noch ueberlaufenden Text"*. Bei „SIGNATURE
* EDITION · Von Philipp Egger definiert, nummeriert · verfuegbar" lief
* der Block aus der Spalte heraus.
*
* Gegengeprueft, ob die Spalte ueberhaupt je neben der Knopfspalte
* steht: nein. `.pe-view__barcol` ist `flex: 1 1 22em` und waechst auf
* die volle Breite — auf der Kunstdruckseite bei 1340 px, im Overlay bei
* 1440 und bei 1920 px steht der Preisblock immer in einer eigenen
* Zeile. Die alte Regel loeste damit ein Problem, das es nicht gab, und
* verursachte eines, das es gab.
*
* `min-width: 0` gehoert dazu: ohne das kann ein Flexkind nicht unter
* seine Inhaltsbreite schrumpfen, und genau das ist ein Ueberlauf. */
.pe-view__price {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
flex: 1 1 100%;
min-width: 0;
max-width: 100%;
/* Linksbuendig, seit 2.158.0.
*
* Bis dahin stand hier `right`. Solange die Spalte nur Knopf und
* Betrag trug, war das stimmig — „links was man bekommt, rechts was
* es kostet". Seit 2.157.2 haengt das Skript aber MwSt-Zeile und
* Werkklasse mit hinein, und die sind Fliesstext: der Betrag stand
* rechts, die Editionsinfo eine Zeile darunter links. Simon am
* 31.08.2026: *„Sieht unsauber aus."* Eine gemeinsame Kante ist
* mehr wert als die alte Trennung. */
text-align: left;
line-height: 1.05;
}
/* Der aufgeklappte Kasten darf die Spalte nicht breiter machen.
*
* `.pe-view__price` ist `flex: 0 0 auto` — sie ist so breit wie ihr
* breitestes Kind. Am 31.08.2026 gemessen: zugeklappt 438 px, beim
* Aufklappen des „i" sprang sie auf 1099 px und schob die Knopfspalte
* daneben auf ein Drittel zusammen. Ein Kasten, der die Seite umbaut,
* sobald man ihn oeffnet, ist schlimmer als einer, der zu schmal ist.
*
* `width: 0` nimmt den Kasten aus der Breitenrechnung der Spalte
* heraus, `min-width: 100%` gibt ihm danach die volle Spaltenbreite
* zurueck. Er waechst dann nur noch nach unten.
*
* Gezielt der TEXT, nicht die ganze Klappe: die Kopfzeile — Name,
* Kurzsatz, Verfuegbarkeit — soll die Spalte weiter mitbestimmen.
* Auf `.pe-klasse` angewandt fiel die Spalte von 438 auf 297 px, und
* die Kopfzeile brach um. Simon am 31.08.2026 zur Preiszeile: *„OHNE
* unschoen viele Zeilenumbrueche."* */
.pe-view__price .pe-klasse__text {
width: 0;
min-width: 100%;
}
/* Der Preisabsatz richtet sich sonst selbst nach rechts aus — er ist
eine eigene Flexspalte mit `align-items: flex-end`. In der Preisspalte
traegt die Spalte die Ausrichtung, und den seitlichen Innenabstand
braucht er hier nicht: er stuende sonst weiter innen als der Knopf. */
.pe-view__price .pe-aus__preis {
align-items: flex-start;
text-align: left;
padding: 0;
}
.pe-view__price:empty { display: none; }
/* Der Anfragen-Knopf so breit wie die drei Ansichtsknoepfe darueber.
*
* Simon: *„Darf gerne immer auf die Breite der drei Buttons unter dem
* Werk (Werk / Raum / Vollbild) definiert sein."* Das Mass kommt aus
* `knopfbreiteSetzen()` in `pe-configurator.js` — gemessen, weil die
* Reihe in jeder Sprache anders breit ist. Fehlt die Variable, bleibt es
* bei voller Spaltenbreite; ein Knopf, der zu breit ist, ist harmlos,
* einer, der aus der Spalte laeuft, nicht.
*
* Die Werkklasse bleibt davon unberuehrt: ihr Text *darf* die Spalte
* ausnutzen, sagt Simon ausdruecklich. */
.pe-view__price .pe-btn {
width: 100%;
max-width: var(--pe-anfrage-breite, 100%);
}
/* Auf schmalen Geräten stapelt sich alles in einer Spalte, und zwar in
dieser Reihenfolge: Ansichtsknöpfe, Thumbleiste, Regler, Preis mit
Anfragen-Knopf, danach erst die Hinweiszeilen.
---------------------------------------------------------
Die Hinweiszeilen stehen im Markup innerhalb der Knopfspalte, der
Preisblock daneben. `display: contents` löst die Knopfspalte auf, so
dass alle Teile Geschwister derselben Reihenfolge werden — sonst
ließe sich der Preis nicht zwischen Regler und Hinweise schieben. */
/* =========================================================
* Ansicht auf schmalen Geräten
* ---------------------------------------------------------
* Dieser Block steht bewusst NACH allen Basisregeln der Ansicht. Eine
* frühere Fassung stand weiter oben, und die padding-Kurzschreibweise
* von .pe-view hat den seitlichen Abstand danach wieder auf null
* gesetzt — sichtbar als Preis, der an der Bildschirmkante klebt.
* ======================================================= */
@media (max-width: 700px) {
.pe-view { padding-inline: var(--pe-mobile-pad, 1.25rem); }
/* Alles stapelt sich in einer Spalte, in dieser Reihenfolge:
Ansichtsknöpfe, Thumbleiste, Regler, Preis mit Anfragen-Knopf,
danach erst die Hinweiszeilen.
Die Hinweiszeilen stehen im Markup innerhalb der Knopfspalte, der
Preisblock daneben. `display: contents` löst die Knopfspalte auf,
so dass alle Teile Geschwister derselben Reihenfolge werden — sonst
ließe sich der Preis nicht zwischen Regler und Hinweise schieben. */
.pe-view__actions { flex-direction: column; align-items: stretch; }
.pe-view__barcol { display: contents; }
.pe-view__bar { order: 1; }
.pe-view__thumbs { order: 2; }
.pe-view__hint { order: 3; }
.pe-view__controls { order: 4; }
.pe-view__price { order: 5; }
[data-pe-vat],
[data-pe-hint],
[data-pe-edition-note] { order: 6; }
/* Knöpfe und Preis mittig über dem Anfragen-Knopf. Die Textzeilen
darunter bleiben linksbündig — zentrierter Fließtext liest sich
schlechter, zentrierte Bedienelemente sehen besser aus. */
.pe-view__bar { justify-content: center; }
.pe-view__thumbs { justify-content: center; }
.pe-view__price {
width: 100%;
align-items: stretch;
/* Am Telefon aus demselben Grund links wie am Schreibtisch: der
* Block traegt jetzt auch MwSt-Zeile und Werkklasse. Die
* Ansichtsknoepfe darueber bleiben mittig — das sind
* Bedienelemente, kein Text. */
text-align: left;
}
/* Der Preis selbst aber mittig — Simon am 31.08.2026: *„Mobil: Preis
* zentriert in der Spalte."* Er steht dort ueber der ganzen Breite
* und ueber dem Knopf, der ebenfalls die ganze Breite nimmt; links
* angeschlagen haengt die grosse Zahl schief im Kasten. Die
* Steuerangabe gehoert in denselben Absatz und geht mit. */
.pe-view__price .pe-aus__preis {
align-items: center;
text-align: center;
}
.pe-view__price .pe-raum__preis { text-align: center; }
/* Am Telefon nimmt der Knopf die ganze Breite — das hatte Simon so
* abgenommen, und die Knopfreihe darueber ist dort ohnehin fast so
* breit wie die Spalte. */
.pe-view__price .pe-btn { width: 100%; max-width: none; }
}
/* Der Anfragen-Knopf ist die einzige Handlung auf dieser Seite, die
wirklich zählt. Er darf aussehen wie eine. */
.pe-btn--primary {
border-color: currentColor;
background: var(--pe-selected-bg, rgba(128, 128, 128, 0.14));
}
/* Solange der Dialog verfügbar ist, steht das Formular nicht im Fluss.
Ohne JavaScript wird die Klasse nie gesetzt und es bleibt sichtbar. */
.pe-form-hidden { display: none !important; }
.pe-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.9em;
padding: 0 1.1em;
margin: 0;
appearance: none;
background: none;
border: 1px solid var(--pe-border, rgba(128, 128, 128, 0.35));
border-radius: 2px;
font: inherit;
font-size: 0.85em;
line-height: 1;
color: inherit;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pe-btn:hover { border-color: var(--pe-border-hover, rgba(128, 128, 128, 0.75)); }
/* Gedrückt sieht aus wie ausgewählt — und zwar aus DERSELBEN Quelle.
*
* `aria-pressed` steht ohnehin schon an den Knöpfen, die einen Zustand
* halten: die beiden Ausrichtknöpfe und das Vollbild. Eine zweite
* Klasse danebenzusetzen hiesse, denselben Zustand zweimal zu führen —
* und die zweite Fassung ist die, die beim nächsten Umbau vergessen
* wird. Das Vorlesegerät und das Auge lesen ab jetzt dasselbe Attribut.
*
* Simon am 26.08.2026: *„den Ausrichtungs-Button highlighten, der
* gerade aktiv ist."* Es ist bewusst genau der Look, den
* „Raumvorschau" schon trägt — ein zweites Aktiv-Aussehen auf
* derselben Seite wäre eine Unterscheidung ohne Unterschied. */
.pe-btn.is-active,
.pe-btn[aria-pressed="true"] {
border-color: currentColor;
background: var(--pe-selected-bg, rgba(128, 128, 128, 0.14));
}
.pe-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* =========================================================
* Thumbleiste — nur in der Raumansicht
* ======================================================= */
.pe-view__thumbs {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.5rem;
}
/* Ausgleich, damit Szenen-Thumbs und eigene Fotos auf einer Linie sitzen:
die eigenen tragen oben und rechts Platz für den Löschknopf. */
.pe-view__thumbs > .pe-thumb { margin-top: 0.55em; }
/* In der Lightbox steht die Leiste wieder für sich. */
.pe-lightbox .pe-view__thumbs { margin-top: 0.5rem; }
/* Der [hidden]-Vorrang steht weiter oben, einmal für den ganzen Block. */
.pe-thumb {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.2em;
height: 3.2em;
padding: 0;
margin: 0;
appearance: none;
background: none center/cover no-repeat;
border: 1px solid var(--pe-border, rgba(128, 128, 128, 0.35));
border-radius: 2px;
color: inherit;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pe-thumb:hover { border-color: var(--pe-border-hover, rgba(128, 128, 128, 0.75)); }
.pe-thumb.is-active {
border-color: currentColor;
box-shadow: 0 0 0 1px currentColor;
}
.pe-thumb:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }
.pe-thumb--upload { background-color: var(--pe-selected-bg, rgba(128, 128, 128, 0.14)); }
/* Eigene Fotos: Thumb plus Löschknopf. Der Knopf sitzt in der Ecke,
überlappt den Thumb aber nicht — sonst verdeckt er das Bild und ist
auf dem Touchgerät kaum sicher zu treffen. */
.pe-thumb-wrap {
position: relative;
display: inline-flex;
padding-top: 0.55em;
padding-right: 0.55em;
}
.pe-thumb__remove {
position: absolute;
top: 0;
right: 0;
width: 1.5em;
height: 1.5em;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
appearance: none;
background: var(--pe-bg, #1a1a1a);
border: 1px solid var(--pe-border, rgba(128, 128, 128, 0.35));
border-radius: 50%;
color: inherit;
font: inherit;
font-size: 0.8em;
line-height: 1;
cursor: pointer;
opacity: 0.75;
transition: opacity 0.15s ease, border-color 0.15s ease;
}
.pe-thumb__remove:hover { opacity: 1; border-color: currentColor; }
.pe-thumb__remove:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* =========================================================
* Ausrichtungsviereck
* ---------------------------------------------------------
* Vier Griffe plus Umriss. Der Umriss liegt in einem SVG mit
* viewBox 0..100 und preserveAspectRatio: none — damit sind die
* Punktkoordinaten dieselben Prozentwerte, mit denen das JS rechnet,
* ohne Umrechnung an zwei Stellen.
* ======================================================= */
.pe-quad {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
}
.pe-quad[hidden] { display: none !important; }
.pe-quad__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.pe-quad__poly {
fill: rgba(255, 255, 255, 0.06);
stroke: rgba(255, 255, 255, 0.9);
stroke-width: 0.35;
vector-effect: non-scaling-stroke;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
}
/* Solange das Foto eingerichtet wird, liegt die Konfiguration still.
Gedämpft und nicht bedienbar — sichtbar, dass es gleich wieder geht.
Die Thumbleiste bleibt hell: ein anderes Foto ist kein Konfigurieren,
sondern ein Neuanfang. */
.pe-aus.ist-eingerichtet .pe-aus__karten,
.pe-aus.ist-eingerichtet .pe-aus__groessen,
.pe-aus.ist-eingerichtet .pe-aus__bearbeiten,
.pe-aus.ist-eingerichtet .pe-aus__fein {
opacity: .35;
pointer-events: none;
filter: grayscale(1);
transition: opacity .25s ease, filter .25s ease;
}
.pe-aus__bearbeiten.ist-gesperrt > summary { cursor: default; }
@media (prefers-reduced-motion: reduce) {
.pe-aus.ist-eingerichtet .pe-aus__karten,
.pe-aus.ist-eingerichtet .pe-aus__groessen,
.pe-aus.ist-eingerichtet .pe-aus__bearbeiten,
.pe-aus.ist-eingerichtet .pe-aus__fein { transition: none; }
}
/* Foto anpassen — drei Regler hinter einer Klappe.
Simons Entscheidung vom 01.09.2026: drei weitere Zeilen über volle
Breite wären am Telefon in einer schon vollen Steuerung zu viel.
Zugeklappt kosten sie eine. */
.pe-bildwerte {
margin-top: .6rem;
font-size: .92em;
}
.pe-bildwerte[hidden] { display: none !important; }
.pe-bildwerte__kopf {
cursor: pointer;
list-style: none;
padding: .2em 0;
opacity: .85;
}
.pe-bildwerte__kopf::-webkit-details-marker { display: none; }
.pe-bildwerte__kopf::marker { content: ''; }
.pe-bildwerte__kopf::before {
content: '+';
display: inline-block;
width: 1.1em;
font-variant-numeric: tabular-nums;
}
.pe-bildwerte[open] > .pe-bildwerte__kopf::before { content: '−'; }
.pe-bildwerte__feld { display: block; margin-top: .35em; }
.pe-bildwerte__regler { flex: 1 1 auto; min-width: 0; }
/* Feste Breite, damit die Regler nicht bei jedem Prozent springen —
`tabular-nums` allein genügt nicht, „100 %" ist breiter als „99 %". */
.pe-bildwerte__wert {
flex: 0 0 3.6em;
text-align: right;
font-variant-numeric: tabular-nums;
opacity: .7;
}
.pe-bildwerte__zurueck { margin-top: .5em; }
/* =====================================================================
* Die Führung nach dem Hochladen — zwei Schritte, mehr nicht
* ---------------------------------------------------------------------
* Philipp am 01.09.2026: *„von allen Testern das Feedback, dass keiner
* es checkt, dass die Punkte im Raum platziert werden müssen."* Die
* Vorlage ist die Smartist-App: Wandfläche wählen, dann Wandbreite.
*
* Sie steht ÜBER der Bühne, nicht darin — im Bild wäre sie ein Schild
* vor dem, was sie erklärt, und am Telefon nähme sie die halbe Höhe.
* ================================================================== */
.pe-fuehrung {
display: flex;
/* Text links, Knopf rechts, beide in EINER Zeile — Simon am
01.09.2026: *„der ‚Weiter‘ Button nicht so unten dran kleben,
sondern in einer Zeile mit dem Text aber rechtsbündig."* Oben
ausgerichtet, nicht mittig: bei zwei Textzeilen säße ein mittiger
Knopf zwischen ihnen statt an der ersten. */
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: nowrap;
text-align: left;
margin: 0 0 .8rem;
padding: .8rem 1rem;
border: 1px solid var(--pe-line, currentColor);
background: var(--pe-aus-flaeche, rgba(128, 128, 128, .10));
}
.pe-fuehrung[hidden] { display: none !important; }
.pe-fuehrung__text { flex: 1 1 auto; min-width: 0; }
.pe-fuehrung__schritt {
display: block;
font-size: .72em;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .55;
}
.pe-fuehrung__titel {
display: block;
font-size: 1.05em;
line-height: 1.3;
}
.pe-fuehrung__hilfe {
display: block;
font-size: .85em;
opacity: .75;
line-height: 1.4;
}
.pe-fuehrung__knopf { flex: 0 0 auto; }
/* Die Wahl im letzten Schritt liegt ÜBER dem Foto, unten mittig — dort,
wo sonst nichts steht und wo sie neben dem liegt, worüber sie
entscheidet. Simon: *„kann das im Schritt eine Art overlay werden?"* */
.pe-fuehrung__ueber {
position: absolute;
/* NICHT `left: 50%` mit Rückversatz: dann steht dem Kasten nur die
rechte Hälfte der Bühne zur Verfügung, und er bricht um, obwohl
Platz da wäre. Am 01.09.2026 gemessen — 336 px statt 672, und die
drei Knöpfe standen in zwei Reihen. Mit `left: 0; right: 0` und
`width: fit-content` ist beides beisammen: volle Breite als
Grundlage, und trotzdem nur so breit wie nötig. */
left: 0;
right: 0;
bottom: .6rem;
margin: 0 auto;
width: fit-content;
z-index: 6;
display: flex;
gap: .35rem;
flex-wrap: wrap;
justify-content: center;
max-width: calc(100% - 1rem);
/* Knapp gehalten — Simon: *„etwas kleinere, nicht zu viel padding,
damit das Foto gut sichtbar bleibt."* Drei Knöpfe liegen hier auf
dem Bild, das sie beurteilen lassen sollen. */
padding: .3rem;
border-radius: 2px;
/* Dunkler Grund, damit die Knöpfe auf jedem Foto lesbar bleiben —
ein heller Knopf auf einer weißen Wand ist keiner. */
background: rgba(0, 0, 0, .45);
backdrop-filter: blur(2px);
}
.pe-fuehrung__ueber[hidden] { display: none !important; }
.pe-fuehrung__ueber > [hidden] { display: none !important; }
/* Dunkel, nicht hell — Simon am 01.09.2026. Zwei weisse Flaechen auf
einem Foto sind zwei Loecher darin; dunkel bleibt es ein Schild, das
darueber liegt. */
.pe-fuehrung__ueber .pe-btn {
background: rgba(0, 0, 0, .55);
color: #fff;
border-color: rgba(255, 255, 255, .7);
}
.pe-fuehrung__ueber .pe-btn {
height: 2.1em;
padding: 0 .8em;
font-size: .85em;
white-space: nowrap;
}
.pe-fuehrung__ueber .pe-btn:hover,
.pe-fuehrung__ueber .pe-btn:focus-visible {
background: rgba(0, 0, 0, .75);
border-color: #fff;
}
/* Die gewählte Ausrichtung ist zu sehen, nicht nur zu ahnen: sie steht
hell auf dunklem Grund, umgekehrt zu den beiden anderen. */
.pe-fuehrung__ueber .pe-btn.is-gewaehlt {
background: rgba(255, 255, 255, .92);
color: #111;
border-color: #fff;
}
/* „Fertig" ist die Handlung, nicht die Wahl — abgesetzt durch einen
Abstand, damit niemand sie für eine dritte Ausrichtung hält. */
.pe-fuehrung__ueber-fertig { margin-left: .5rem; }
/* Am Telefon passen die drei nicht nebeneinander: bei 374 px Bühne sind
„Raum ausrichten" und „Werk ausrichten" allein schon 293 px breit.
Gemessen standen sie deshalb in DREI Reihen und deckten 44 % des
Fotos — genau das, was Simon nicht wollte.
Kleiner gesetzt passen die beiden Ausrichtungen in eine Reihe und
„Fertig" darunter: zwei Reihen statt drei, und das Foto bleibt zu
drei Vierteln frei. */
@media (max-width: 700px) {
.pe-fuehrung__ueber { gap: .3rem; padding: .25rem; }
.pe-fuehrung__ueber .pe-btn {
font-size: .74em;
padding: 0 .6em;
height: 2em;
}
.pe-fuehrung__ueber-fertig {
margin-left: 0;
flex: 0 0 100%;
align-self: center;
max-width: 8em;
}
}
/* Das Maßband steht IN der Box, unter dem Text — Schritt 2. Kein
seitlicher Innenabstand mehr: die Box bringt ihren eigenen mit. */
.pe-massband {
display: flex;
align-items: center;
gap: .8rem;
margin: .6rem 0 .1rem;
}
.pe-massband[hidden] { display: none !important; }
.pe-massband__regler { flex: 1 1 auto; min-width: 0; }
.pe-massband__wert {
flex: 0 0 5.5em;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Schritt 3 holt die Bildregler in die Box. Dort brauchen sie weder
Rahmen noch Klapp-Plus: die Überschrift der Box sagt schon, was sie
sind, und zugeklappt wären sie ein Schritt, der nichts zeigt. */
.pe-bildwerte.is-fuehrung {
margin-top: .6rem;
}
.pe-bildwerte.is-fuehrung > .pe-bildwerte__kopf { display: none; }
@media (max-width: 700px) {
/* Auch am Telefon eine Zeile: der Text bricht um, der Knopf bleibt
rechts. Volle Knopfbreite hatte ihn unter den Text geschoben —
genau das, was Simon nicht wollte. */
.pe-fuehrung { padding: .65rem .7rem; gap: .7rem; }
.pe-fuehrung__knopf { width: auto; white-space: nowrap; }
}
/* Alles ausser der Wand wird gedämpft — das ist der ganze Trick daran:
man sieht ohne ein Wort, was gemeint ist. Nur im ersten Schritt, und
nie als Glasscheibe vor den Griffen. */
.pe-quad__schleier {
fill: rgba(0, 0, 0, 0);
pointer-events: none;
transition: fill .25s ease;
}
.pe-quad.is-fuehrung .pe-quad__schleier { fill: rgba(0, 0, 0, .55); }
/* Und die vier Griffe atmen, solange die Führung im ersten Schritt
steht. Dieselbe Bewegung wie am Portfolioknopf — wer sie einmal
gesehen hat, kennt sie wieder. */
@keyframes pe-quad-atmen {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
50% { transform: scale(1.18); box-shadow: 0 0 0 .5em rgba(255, 255, 255, 0); }
}
.pe-quad.is-fuehrung .pe-quad__handle { animation: pe-quad-atmen 2s ease-in-out infinite; }
/* Im zweiten Schritt gilt dasselbe für das Maßfeld. */
.pe-quad__scale.is-fuehrung {
outline: 2px solid #fff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.pe-quad.is-fuehrung .pe-quad__handle { animation: none; }
.pe-quad__schleier { transition: none; }
}
.pe-quad__handle {
position: absolute;
width: 2em;
height: 2em;
margin: -1em 0 0 -1em;
padding: 0;
appearance: none;
border: 2px solid #fff;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
pointer-events: auto;
cursor: grab;
touch-action: none;
}
.pe-quad__handle:active { cursor: grabbing; }
.pe-quad__handle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pe-quad__handle[hidden] { display: none !important; }
/* Im ausgerichteten Zustand bleibt die Markierung stehen, nur leiser:
sie sagt, worauf sich die Zentimeterangabe bezieht. Ohne sie wäre der
Maßstab eine Zahl ohne Bezugsgröße. */
.pe-quad.is-aligned .pe-quad__poly {
fill: none;
stroke: rgba(255, 255, 255, 0.45);
stroke-dasharray: 4 4;
}
/* Maßschild auf der Unterkante — ein Eingabefeld, kein Etikett.
translate(-50%, -50%) setzt seinen Mittelpunkt auf die Linie; die
Angabe sitzt damit AUF der Strecke, die sie beschreibt. */
.pe-quad__scale {
position: absolute;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: baseline;
gap: 0.25em;
padding: 0.25em 0.5em;
border-radius: 0.2em;
border: 1px solid rgba(255, 255, 255, 0.55);
background: rgba(0, 0, 0, 0.66);
color: #fff;
font-size: 0.78em;
line-height: 1.2;
white-space: nowrap;
pointer-events: auto;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.pe-quad__scale-input {
appearance: none;
margin: 0;
padding: 0;
border: 0;
border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
background: transparent;
color: inherit;
-webkit-text-fill-color: currentColor;
font: inherit;
text-align: right;
min-width: 2ch;
}
.pe-quad__scale-input:focus {
outline: none;
border-bottom-color: #fff;
}
.pe-quad__scale-unit { opacity: 0.75; }
/* Lupe. Beim Ziehen liegt der Finger auf genau der Stelle, die man
treffen will — auf dem Handy verdeckt er sie vollständig. Deshalb
derselbe Ausschnitt vergrößert daneben.
Kein zweites , sondern das Foto als Hintergrund: der Ausschnitt
lässt sich so über background-position auf den Bruchteil eines Pixels
genau setzen, ohne dass der Browser ein weiteres Bild lädt.
pointer-events: none, damit sie dem Finger nie im Weg steht. */
.pe-loupe {
position: absolute;
width: 8em;
height: 8em;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.4);
pointer-events: none;
overflow: hidden;
z-index: 4;
}
.pe-loupe[hidden] { display: none !important; }
/* Fadenkreuz: zeigt, welcher Punkt gerade gesetzt wird. Ohne das ist
die Vergrößerung hübsch, aber man weiß nicht, worauf sie zielt. */
.pe-loupe__cross {
position: absolute;
inset: 0;
background:
linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) center / 100% 1px no-repeat,
linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) center / 1px 100% no-repeat;
mix-blend-mode: difference;
}
.pe-loupe__cross::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 1.4em;
height: 1.4em;
margin: -0.7em 0 0 -0.7em;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
}
/* Der Knopf steht in derselben Zeile wie das Zahlenfeld und bekommt
dessen Höhe. Über die Schriftgröße gerechnet wäre er niedriger als
das Feld und säße sichtbar schief — deshalb align-items: stretch an
der Zeile und keine eigene Höhe am Knopf. */
.pe-field__row { align-items: stretch; }
.pe-btn--small {
/* Eine Hoehe fuer alle, nicht die Hoehe der Zeile.
*
* Vorher stand hier `height: auto; align-self: stretch`. Damit wurde
* jeder Knopf so hoch wie die Flexzeile, auf der er gerade landet —
* und das haengt allein an der Fensterbreite. Am 30.08.2026 bei
* 414 px in Chrome, WebKit und **echtem Safari** gemessen, alle drei
* bis auf die Nachkommastelle gleich:
*
* Zeile 1 Breite | 400 | cm | [Raum ausrichten] 34,0 px
* Zeile 2 [Werk ausrichten] [Zuruecksetzen] 40,5 px
*
* Oben streckt sich der Knopf auf das 34 px hohe Zahlenfeld, unten
* steht er allein und wird 40,5. Simon sah das als *„die Ausrichten
* Buttons sind nicht sauber"* — und hielt es fuer einen
* Safari-Fehler, weil sein Safari-Fenster schmaler war und deshalb
* anders umbrach. Es ist keiner: es ist in jedem Motor so.
*
* `1.85em` ist die Hoehe des Zahlenfelds, ausgedrueckt im Mass des
* KNOPFES: das Feld misst 34 px, die Knopfschrift 18,4 px. Erst
* gemessen, dann eingetragen — der erste Versuch mit 1.7em rechnete
* gegen die Schrift der Zeile statt gegen die des Knopfes und kam
* auf 31 px. */
height: 1.85em;
align-self: center;
padding: 0 0.9em;
font-size: 0.78em;
white-space: nowrap;
}
/* Ein Zahlenfeld ohne Pfeilchen.
*
* `.pe-field__number` setzt Rahmen, Farbe und Schrift selbst, liess dem
* Browser aber sein `appearance: auto` — am 30.08.2026 in allen drei
* Motoren so gemessen. Safari zeichnet daraufhin die Stufenpfeile
* dauerhaft ins Feld, Chrome nur beim Ueberfahren; auf Simons
* Safari-Screenshot stehen sie mitten in der Zeile.
*
* Die Pfeile taugen hier ohnehin nichts: die Wandbreite wird getippt
* oder aus der Markierung uebernommen, nicht in Einerschritten
* hochgeklickt. */
.pe-field__number {
appearance: none;
-webkit-appearance: none;
}
.pe-field__number::-webkit-outer-spin-button,
.pe-field__number::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Der Übergang beim Ausrichten läuft weich — ein Foto, das
schlagartig kippt, wirkt wie ein Fehler. */
.pe-view__room-bg,
.pe-view__room-fade {
transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.25, 1);
}
/* =========================================================
* Nutzereingaben zum eigenen Foto
* ---------------------------------------------------------
* Zwei Gruppen: Maßstab und Platzierung. Sechs gleich aussehende
* Regler in einer Reihe wären nicht zu überblicken.
* ======================================================= */
.pe-view__controls {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.pe-view__controls[hidden] { display: none !important; }
.pe-group-box {
flex: 1 1 20em;
min-width: 0;
margin: 0;
padding: 0.2em 0.9em 0.6em;
border: 1px solid var(--pe-border, rgba(128, 128, 128, 0.35));
border-radius: 2px;
background: var(--pe-selected-bg, rgba(128, 128, 128, 0.08));
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.35rem 0.9rem;
}
.pe-group-box__title {
padding: 0 0.4em;
font-size: 0.72em;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.75;
}
/* Der Hinweis am „i" der Ausrichten-Zeile — ein Kasten, kein Absatz.
*
* Er stand als Flex-Kind IM Fluss (`flex: 1 1 100%`) und wurde mit
* `display` ein- und ausgeblendet. Damit schob er beim Aufgehen die
* ganze Zeile nach unten — und weil dabei das „i" unter dem Zeiger
* wegrutschte, kam sofort `pointerleave`, der Kasten schloss, die Zeile
* sprang zurueck, `pointerenter` feuerte erneut. Das war Simons
* *„flackert hart und zeigt nicht sauber an"*.
*
* Jetzt dieselbe Bauart wie der Kasten an den Ausfuehrungskarten:
* absolut unter der Gruppe, aus dem Fluss genommen, ueber
* `opacity`/`visibility` geschaltet. Es verschiebt sich nichts mehr,
* also gibt es auch nichts, wovon der Zeiger rutschen koennte. */
.pe-group-box { position: relative; }
.pe-group-box__note {
position: absolute;
top: calc(100% + .35em);
left: 0;
right: 0;
z-index: 8;
margin: 0;
padding: .8em 1em;
font-size: 0.78em;
line-height: 1.45;
text-align: left;
color: #f2f2f2;
background: #0d0d0d;
border: 1px solid rgba(255, 255, 255, .55);
border-radius: 3px;
box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .55);
opacity: 0;
visibility: hidden;
/* Beim Ueberfahren KEIN Ziel fuer den Zeiger: liefe er auf den Kasten,
verliesse er das „i", und das Flackern faenge von vorn an. Der
geklickte Zustand ist etwas anderes — dort darf man den Text
markieren. */
pointer-events: none;
transition: opacity .15s, visibility 0s linear .15s;
}
.pe-field {
display: flex;
flex-direction: column;
gap: 0.15em;
flex: 1 1 8em;
min-width: 7em;
}
.pe-field__label {
font-size: 0.7em;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.7;
line-height: 1.2;
}
.pe-field__row {
display: flex;
align-items: center;
gap: 0.5em;
}
.pe-field__number {
box-sizing: border-box;
width: 100%;
height: 2em;
padding: 0 0.6em;
background: none;
border: 1px solid var(--pe-border, rgba(128, 128, 128, 0.35));
border-radius: 2px;
color: inherit;
font: inherit;
font-size: 0.85em;
}
.pe-field__number:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.pe-field__unit {
font-size: 0.8em;
opacity: 0.65;
white-space: nowrap;
}
.pe-field__range {
box-sizing: border-box;
width: 100%;
height: 1.7em;
margin: 0;
padding: 0;
background: none;
accent-color: currentColor;
cursor: pointer;
}
.pe-field__range:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* =========================================================
* Sticky linke Spalte
* ---------------------------------------------------------
* Auf schmalen Geräten abgeschaltet: dort stehen die Spalten
* untereinander, und ein klebender Block würde den halben Bildschirm
* dauerhaft belegen.
* ======================================================= */
@media (min-width: 900px) {
/* Ein klebender Block braucht eine Spalte, die HÖHER ist als er selbst
— er klebt innerhalb seines Elternelements, nicht innerhalb der
Seite. Steht am Bricks-Container `align-items: flex-start`, ist jede
Spalte exakt so hoch wie ihr Inhalt. Dann gibt es keinen Weg, an dem
etwas kleben könnte, und sticky sieht aus wie abgeschaltet, ohne
dass irgendwo ein Fehler stünde. Diese Zeile hebt das für die eine
betroffene Spalte auf. */
:has(> [data-pe-sticky]) { align-self: stretch; }
/* Doppelt geschriebenes Attribut, damit diese Regel gewinnt.
*
* In der Bricks-Anleitung stand als Vorgabe 1,5rem, und dieses
* Schnipsel steht als Seiten-CSS im Template. Bei gleicher
* Spezifität gewinnt das später geladene — also Bricks, und der
* Konfigurator klebte mit Abstand. Der doppelte Attributselektor
* hebt die Spezifität um eine Stufe und entscheidet die Sache
* eindeutig, ohne !important. Der Abstand bleibt über
* --pe-sticky-top einstellbar. */
[data-pe-sticky][data-pe-sticky] {
position: sticky;
top: var(--pe-sticky-top, 0rem);
/* KEIN z-index.
Er stand hier, damit das Anfrageformular beim Hochscrollen nicht
über das Werk läuft. Seit das Formular im Dialog liegt und gar
nicht mehr im Fluss steht, ist der Grund entfallen — und ein
z-index am klebenden Block hebt den Konfigurator über Elemente,
die über ihm liegen sollen, etwa das Kontaktfeld im Kopfbereich.
Falls doch einmal nötig: --pe-sticky-z setzen. */
z-index: var(--pe-sticky-z, auto);
}
}
/* =========================================================
* Anfrage-Klappe
* =======================================================
* Bis 2.78.0 stand hier ein Modal (`.pe-modal`). Es haengte an
* `document.body` und lag damit UNTER dem Konfigurator-Overlay, das als
* modaler `