/* =========================================================================== DIE KONTAKTLEISTE (V3.50.96) =========================================================================== NEU GEFASST am 08.09.2026 nach einem Entwurf, der in der echten Seite gezeichnet und dort gemessen wurde. Chris hatte die erste Fassung so beurteilt: „Unten fällt sie mir gar nicht auf. Sie geht total unter in der Form. Die beiden Buttons sind ja schwarz, das heißt, sie fällt gar nicht auf. Sie müssen rechts sein, rechts außen, und dann mit der ganzen Seite mitscrollen. Und sie müssen viel auffälliger sein. Es sind Buttons und sie sollten auf orange sein, schwarzer Text auf orange." Und danach, aus demselben Entwurf heraus: „Standardmäßig nur Icons. Telefonhörer und Mailsymbol. Die Bedeutung erschließt sich, man braucht den Text nicht dazu. Ich möchte es allerdings als Option haben, dass ich den Text hinzuschalten könnte." WAS SICH DAMIT UMKEHRT, und das gehört benannt: Die erste Fassung war auf Zurückhaltung gebaut — dunkler Grund, Symbol hell, das Wort erschien erst beim Berühren. Genau diese Zurückhaltung war der Fehler: Auf einer Seite, die selbst dunkel ist, verschwindet eine dunkle Leiste. Die Leiste ist jetzt sichtbar und ruhig zugleich: Sie leuchtet nicht, sie pulsiert nicht, sie springt nicht auf — sie steht einfach da, in der Farbe der Marke. MASSE AUS DEM DESIGNHANDBUCH, nachgeschlagen statt gewählt: Markenfarbe #D59F3C — kommt als Variable aus dem Branding Schrift/Symbol #111111 — gerechnet, nicht gewählt (7,96 : 1) Eckenradius 8 px — aus dem Branding Knopfabstand 10 px Tastfläche 48 px — kleinste sicher treffbare Fläche AM LAUFENDEN SYSTEM GEMESSEN (08.09.2026, Fensterbreite 1400 px): Inhaltsspalte 1280 px, fest gedeckelt Freier Rand 68 px rechts Kachel + Luft 48 + 16 = 64 px → passt, 4 px Luft Mit Beschriftung 205 px → passt NICHT, deshalb ist der Text eine Zuschaltung und keine Vorgabe STAPELHÖHE, ebenso gemessen: Einwilligung 999999 Rechtspflicht Warenkorb 99990+ laufender Kauf Suche 1200 ausdrückliche Handlung Kopfzeile 1000 >> diese Leiste 900 über dem Inhalt, unter allem, was Vorrang hat ======================================================================== */ .pm-kl{ --pm-kl-gold:#D59F3C; --pm-kl-radius:8px; --pm-kl-goldschrift:#111111; --pm-kl-kachel:48px; --pm-kl-luft:16px; --pm-kl-abstand:10px; /* DER TAKT. Chris am 08.09.2026: „Das Aufklappen ist nicht sehr elegant. Das muss weicher gehen. Allerdings auch nicht in Zeitlupe. Es muss ein richtiges Verhältnis sein." Aufgehen dauert länger als Zugehen: Das Öffnen ist eine Einladung und darf gesehen werden, das Schließen ist ein Aufräumen und soll nicht warten lassen. 260 zu 180 ms. */ --pm-kl-auf:260ms; --pm-kl-zu:180ms; /* Die Kurve. Chris am 08.09.2026: „Es ist so ein Aufspringen und es sieht nicht sehr geschmeidig aus." GEMESSEN, fünf Kurven an derselben Bewegung, je 26 Proben im Abstand von 8 ms. Entscheidend ist der grösste Sprung innerhalb einer Probe - er ist das, was das Auge als Ruck sieht - und wann er kommt: cubic-bezier(.22,.61,.36,1) 13 % bei 69 ms (setzt sofort an) cubic-bezier(.32,.72,0,1) 25 % bei 50 ms ← das Aufspringen cubic-bezier(.4,0,.2,1) 16 % bei 102 ms ← gewählt cubic-bezier(.45,.05,.25,1) 17 % bei 116 ms ease-in-out 15 % bei 166 ms (wirkt zäh) Gewählt ist die dritte: Sie setzt sanft an, hat ihre Geschwindigkeit in der MITTE und läuft aus - 90 % der Breite nach 198 von 260 ms. Die zweite hatte ihren grössten Schritt schon nach 50 ms; das ist das Aufspringen, das Chris gesehen hat. */ --pm-kl-kurve:cubic-bezier(.4,0,.2,1); position:fixed; right:var(--pm-kl-luft,16px); top:50%; transform:translateY(-50%); z-index:900; margin:0;padding:0; display:flex;justify-content:flex-end; } /* Kein Behälter mehr, kein dunkler Kasten: Jeder Weg ist ein eigener Knopf. Der Kasten war es, der die Leiste zu einem Fremdkörper gemacht hat — er brachte eine dritte Farbe mit, die weder Grund noch Marke war. */ .pm-kl-liste{ list-style:none;margin:0 0 0 auto;padding:0; display:flex;flex-direction:column;gap:var(--pm-kl-abstand,10px); align-items:flex-end; } .pm-kl-punkt{margin:0;padding:0;display:block} /* Jede Variable traegt ihren Rückfallwert IM Aufruf. Grund: Die Verwaltungsseite zeigt die Leiste ohne den .pm-kl-Rahmen, in dem die Variablen stehen. Sie hier ein zweites Mal zu setzen waere die Fehlerklasse, die diese Datei gerade beseitigt - dann überschriebe der Rückfallwert im Frontend die Farbe aus dem Branding. */ /* -------------------------------------------------------------------- DER EINZELNE WEG — eine goldene Kachel mit dem Symbol in Tinte. -------------------------------------------------------------------- */ .pm-kl-weg{ /* EIN RASTER MIT ZWEI SPALTEN: links das Wort, rechts das Symbol. Das Symbol steht damit fest am Bildschirmrand, das Wort wächst nach links heraus - ohne das rutschen beim Ausfahren die Symbole der ruhenden Kacheln aus der Flucht (gemessen in V3.50.93, sichtbar nur im Bild, nicht in den Zahlen). WARUM RASTER UND NICHT max-width, V3.50.100: Vorher lief die Bewegung über max-width 0 → 16rem. Die 16rem sind ein Deckel, keine Breite: Das Wort ist 75 px breit, der Deckel 256. Die sichtbare Bewegung war deshalb nach 75/256 des Weges vorbei, während die Kurve weiterlief. GEMESSEN: In den ersten 36 ms sprang das Wort auf 69 % seiner Breite, danach kroch es noch 130 ms. Erst ein Ruck, dann Stillstand - genau das, was Chris als „nicht elegant" gesehen hat. Ein Rasteranteil (0fr → 1fr) läuft auf die ECHTE Breite zu. Die Kurve bildet dann genau das ab, was das Auge sieht. */ display:grid; grid-template-columns:0fr auto; align-items:center; height:var(--pm-kl-kachel,48px); min-width:var(--pm-kl-kachel,48px); padding:0; border-radius:var(--pm-kl-radius,8px); background:var(--pm-kl-gold,#D59F3C); color:var(--pm-kl-goldschrift,#111111); text-decoration:none; white-space:nowrap; /* Zwei Lagen Schatten: eine enge für die Kante, eine weite für den Abstand zur Seite. Ein Schatten gibt Tiefe, ohne zu leuchten. */ box-shadow:0 1px 2px rgba(0,0,0,.24), 0 6px 20px rgba(0,0,0,.20); /* Die Bewegung ist eine ANTWORT auf eine Berührung, keine Werbung. Sie läuft nie von selbst, und sie wiederholt sich nicht. */ /* Alles im selben Takt und auf derselben Kurve: Hebung, Schatten und Aufgehen sind EINE Geste. Verschiedene Dauern liessen sie in drei Teile zerfallen. */ transition:grid-template-columns var(--pm-kl-zu,180ms) var(--pm-kl-kurve,ease), transform var(--pm-kl-zu,180ms) var(--pm-kl-kurve,ease), box-shadow var(--pm-kl-zu,180ms) var(--pm-kl-kurve,ease); } /* 22 + 2 x 13 = 48: Das Symbol sitzt in der ruhenden Kachel genau mittig, ohne dass die Kachel dafür zentrieren müsste. */ /* 22 + 2 x 13 = 48: Das Symbol sitzt in der ruhenden Kachel genau mittig, ohne dass die Kachel dafür zentrieren müsste. */ .pm-kl-symbol{grid-column:2;grid-row:1;width:22px;height:22px;margin:0 13px} /* Berührung und Tastaturfokus tun DASSELBE — eine Handlung, ein Bild. Die Farbe ändert sich dabei NICHT: Es gibt genau eine Markenfarbe, und ein zweiter, abgeleiteter Ton wäre ein Verstoß gegen das Handbuch. Was sich ändert, ist die Lage im Raum. */ .pm-kl-weg:hover, .pm-kl-weg:focus-visible{ /* Der Ursprung liegt RECHTS: Die Kachel waechst nach innen, nie über den Bildschirmrand hinaus - sonst entstuende ein Rollbalken. */ grid-template-columns:1fr auto; /* KEINE Vergrößerung. Sie war der eigentliche Sprung: Eine Kachel, die im selben Moment breiter UND größer wird, macht zwei Bewegungen gleichzeitig - das liest sich als Aufspringen und widerspricht Chris' eigenem Lastenheft („keine Pulsanimationen, kein Aufspringen"). Es bleibt EINE Bewegung: Das Wort geht auf, die Kachel folgt ihm ein Stück nach innen, der Schatten wird tiefer. */ transform:translateX(-4px); box-shadow:0 3px 6px rgba(0,0,0,.26), 0 14px 32px rgba(0,0,0,.32); /* Aufgehen dauert länger als Zugehen. */ transition-duration:var(--pm-kl-auf,260ms); } /* Das Wort faehrt aus. Chris am 08.09.2026: „Bei Mouseover muss sich etwas tun." Es bekommt keine Breite zugewiesen - die Rasterspalte gibt sie ihm. */ .pm-kl-weg:hover .pm-kl-wort, .pm-kl-weg:focus-visible .pm-kl-wort{ opacity:1; padding-left:16px; transition-duration:var(--pm-kl-auf,260ms); } /* Der Fokusring in Tinte, nicht in Weiß: Auf Gold ist Weiß fast unsichtbar (2,37 : 1), Tinte trägt 7,96 : 1. Derselbe gerechnete Wert wie die Schrift — wer mit der Tastatur arbeitet, muss SEHEN, wo er steht. */ .pm-kl-weg:focus-visible{ outline:2px solid var(--pm-kl-goldschrift,#111111); outline-offset:3px; } /* -------------------------------------------------------------------- DIE BESCHRIFTUNG Vorgabe: aus. Chris: „Die Bedeutung erschließt sich, man versteht es, man braucht den Text nicht dazu." Sie wird trotzdem NIE aus dem Markup entfernt, sondern nur unsichtbar gemacht. Ein Symbol ohne Namen ist für einen Screenreader ein leerer Verweis, und ohne Stylesheet muss die Leiste eine schlichte Liste lesbarer Verweise bleiben. -------------------------------------------------------------------- */ /* Das Wort steht in der linken Rasterspalte. Im Ruhezustand ist die Spalte null breit und der Text abgeschnitten - er bleibt aber im Dokument, wird vorgelesen und ist ohne Stylesheet ganz normal lesbar. Ein Versteck per clip-path waere hier falsch: Aus null Breite lässt sich nichts weich aufziehen. */ .pm-kl-wort{ /* grid-row:1 ist NICHT beiläufig. Im Markup steht das Symbol vor dem Wort; ohne die ausdrückliche Zeile setzt die automatische Verteilung das Wort in eine ZWEITE Zeile - die Kachel wird dann doppelt so hoch, das Wort rutscht nach unten links, das Symbol nach oben rechts. Genau so sah es aus, als Chris schrieb: „Das blendet nicht sauber ein, das ruckelt so hinein." Es war kein Ruckeln, sondern ein Umbruch. GEMESSEN hatte ich damals nur die Breite - nicht die Höhe. */ grid-column:1;grid-row:1; min-width:0;overflow:hidden;white-space:nowrap; opacity:0; font-size:14px;font-weight:650;letter-spacing:.01em; transition:opacity var(--pm-kl-zu,180ms) var(--pm-kl-kurve,ease), padding var(--pm-kl-zu,180ms) var(--pm-kl-kurve,ease); } /* Zugeschaltet: das Wort steht dauerhaft neben dem Symbol. */ .pm-kl-mit-wort .pm-kl-weg{grid-template-columns:1fr auto} .pm-kl-mit-wort .pm-kl-wort{overflow:visible;opacity:1;padding-left:16px} /* -------------------------------------------------------------------- DEM WARENKORB AUSWEICHEN Gemessen: .pm-commerce-cart__launcher sitzt fest bei rechts 22, unten 22. Auf dem Rechner steht die Leiste mittig und berührt ihn nicht — sie rückt trotzdem etwas hoch, damit sie ihn im kurzen Fenster nicht streift. Auf dem Telefon ist es ein echtes Ausweichen. -------------------------------------------------------------------- */ .pm-kl.pm-kl-weicht-aus{transform:translateY(calc(-50% - 34px))} /* -------------------------------------------------------------------- SCHMALE FENSTER Der Umbruchpunkt liegt bei 900 px — und der Inhalt gibt darüber rechts Platz ab, statt dass die Leiste weicht. Chris am 08.09.2026: „Die Sticky Bar ist nicht rechts im Browser!" DIE BAUREGEL DES THEMES, ausgelesen statt geraten: .pm-shell { width: min(100% - 48px, 1280px) } Daraus folgt der freie Rand für jede Fensterbreite: ab 1328 px (Fenster − 1280) / 2 — wächst mit dem Fenster darunter fest 24 px — für immer Die Symbolkachel braucht 48 + 16 = 64 px. Unter 1328 px reichen 24 nie. Deshalb wich die Leiste bis V3.50.98 nach unten aus — richtig gerechnet und trotzdem das falsche Ergebnis, weil sie rechts stehen soll. JETZT GIBT DER INHALT AB: Zwischen 901 und 1328 px bekommt .pm-shell rechts 64 px zusätzlich. Der Inhalt rückt dort ein Stück nach links, und die Leiste liegt bei KEINER Breite auf Text. Die Regel greift nur, solange die Leiste eingeschaltet ist — sie hängt an der Klasse pm-kl-aktiv am body, die das Modul selbst setzt. Unter 900 px hört das auf: Dort bliebe für den Text zu wenig übrig (bei 390 px Fensterbreite 278 statt 342). Da wandert sie an den unteren Rand — als zwei goldene Flächen, nicht als schwarze Zeile. -------------------------------------------------------------------- */ @media (max-width:900px){ .pm-kl{ top:auto;bottom:0;left:0;right:0; transform:none; justify-content:center; /* Der sichere Bereich moderner Telefone — ohne das sitzt die Leiste unter der Wischleiste und ist nicht bedienbar. */ padding:0 12px calc(12px + env(safe-area-inset-bottom, 0px)); } /* JEDE Regel dieses Blocks haengt an .pm-kl — und zwar mit Absicht. GEMESSEN am 08.09.2026 nach dem Einspielen von V3.50.96: Die Vorschau in der Verwaltung steht in einer Karte und hat KEINEN .pm-kl-Rahmen. Ohne diese Bindung griffen die schmalen Regeln dort nach der Breite des VERWALTUNGSFENSTERS — die Vorschau zeigte die untere Leiste, obwohl die Website die rechte Spalte zeigt. Die Fensterbreite des Bedieners hat mit der des Besuchers nichts zu tun. */ .pm-kl .pm-kl-liste{flex-direction:row;margin:0;gap:var(--pm-kl-abstand,10px);width:100%} .pm-kl .pm-kl-punkt{flex:1 1 0} .pm-kl .pm-kl-weg{ /* 48 px: die kleinste Fläche, die sich mit dem Daumen sicher treffen lässt — gemessen an der Fingerkuppe, nicht an der Bildschirmdichte. */ width:100%;height:52px; } .pm-kl .pm-kl-weg:hover,.pm-kl .pm-kl-weg:focus-visible{transform:none} /* GEMESSEN im Browser bei 375 px: Mit 78 px stieß die Leiste exakt an die Oberkante des Warenkorbs — Kante an Kante ist kein Ausweichen, sondern ein Zufall, der beim nächsten Pixel kippt. Der Warenkorb ist 56 px hoch und sitzt 22 px über dem Rand; 78 wäre die Berührung. 90 px halten den Schutzraum, den das Handbuch für Bedienelemente verlangt. */ .pm-kl.pm-kl-weicht-aus{ transform:none; padding-bottom:calc(90px + env(safe-area-inset-bottom, 0px)); } } /* -------------------------------------------------------------------- DER INHALT GIBT RECHTS PLATZ AB WO SIE GREIFT, gerechnet und nicht gegriffen: Der freie Rand des Themes ist (Fenster − 1280) / 2, nach unten begrenzt auf 24 px. Die Leiste braucht 64. Aufgelöst nach dem Fenster: (W − 1280) / 2 ≥ 64 ⇔ W ≥ 1408 Ab 1408 px reicht der Rand von selbst — dort ist diese Regel nicht nötig und greift auch nicht. Zwischen 901 und 1407 px greift sie. Bis V3.50.99 hatte ich 1328 angesetzt, die Grenze der FESTEN 24 px; zwischen 1328 und 1408 wächst der Rand zwar, ist aber noch zu schmal. Der Prüfstand hat es bei 1366 px gezeigt: 21 px Kastenkante berührt. WIE sie greift — und der Fehler, den V3.50.99 bis V3.50.103 hatte: Dort stand `margin-inline:auto calc(24px + 64px)`, also links auto und rechts 88 px fest. Für einen Shell, der seine erlaubte Breite voll ausnutzt, stimmt das: links 24, rechts 88. Für einen Shell, der SCHMALER ist als der Platz — `.pm-refc-bridge-inner` hat eine eigene Hoechstbreite von 680 px — schluckt das linke `auto` den GANZEN Rest. GEMESSEN am 08.09.2026 bei 1000 px Fenster: links 217 px, rechts 88 px. Chris sah es sofort: „Ein Tag der bleibt ist nicht mittig." Er hatte recht: mittiger Text stand 129 px aus der Mitte. Die Regel verengt deshalb SYMMETRISCH, statt den Block zu schieben. Bleibt die Frage, WIE VIEL. Zwei Zahlen standen zur Wahl, beide gemessen am 08.09.2026 bei 1000 px Fensterbreite: 100% − 128px → links wie rechts 64 px. Die Kachel belegt genau diese 64 px. Textkante und Kachel stossen bei 921 px aneinander: 0 px Luft. 100% − 176px → links wie rechts 88 px. Zwischen Textkante und Kachel bleiben 24 px. Gewählt ist 176. Der Grund steht schon weiter oben in dieser Datei, zur unteren Leiste: „Kante an Kante ist kein Ausweichen, sondern ein Zufall, der beim nächsten Pixel kippt." Was für den Warenkorb gilt, gilt hier. Mit 176 verschiebt sich auch die obere Mediengrenze, und zwar zwingend: der freie Rand des Themes erreicht 88 px erst bei (W − 1280) / 2 ≥ 88 ⇔ W ≥ 1456 Deshalb endet die Regel bei 1455 px. Bei 1455 ergibt sie 88 px, ab 1456 ergibt das Theme 88 px — der Übergang ist stufenlos. Abzug und Grenze sind also KEINE zwei Einstellungen, sondern eine: wer die eine aendert, muss die andere mitrechnen. Genau das prüft der Wächter „Mitte der Inhaltsspalte" in includes/kontaktleiste.php nach. Preis: Der Inhalt ist zwischen 901 und 1455 px 64 px schmaler als vorher (bei 1000 px: 809 statt 873) und steht dafür mittig. Sie greift nur, solange die Leiste eingeschaltet ist. Ist sie aus, ist die Regel wirkungslos, weil die Klasse am body dann fehlt. Warum sie hier steht und nicht im Theme: Die Leiste verursacht den Bedarf, also trägt sie ihn. Wer die Leiste abschaltet, bekommt das Layout des Themes unverändert zurück — ohne dass jemand eine zweite Datei zurückbauen muss. Wandert die Regel später ins Theme, gehört sie HIER wieder heraus; zwei Quellen für denselben Rand wären der Fehler, den dieses Projekt am häufigsten gemacht hat. -------------------------------------------------------------------- */ @media (min-width:901px) and (max-width:1455px){ body.pm-kl-aktiv .pm-shell{ width:min(100% - 176px, 1280px); margin-inline:auto; } } /* Ausdrückliche Abschaltungen aus der Verwaltung. Die Grenze ist dieselbe wie oben — zwei verschiedene Zahlen wären zwei verschiedene Wahrheiten. */ @media (min-width:901px){ .pm-kl-ohne-desktop{display:none} .pm-kl-nur-mobil{display:none} } @media (max-width:900px){ .pm-kl-ohne-mobil{display:none} .pm-kl-nur-desktop{display:none} } /* Wer ruhige Anzeige eingestellt hat, bekommt keine Bewegung — nur das Ergebnis. Die Leiste bleibt vollständig bedienbar. */ @media (prefers-reduced-motion:reduce){ .pm-kl-weg,.pm-kl-wort{transition:none} .pm-kl-weg:hover,.pm-kl-weg:focus-visible{transform:none} } /* Beim Drucken hat ein Bedienelement nichts verloren. */ @media print{ .pm-kl{display:none} }