/** * MUP — Candor Responsive (Sichtbarkeit pro Gerät) * ───────────────────────────────────────────────────────────────── * FIX 03.08.2026 (Julia, live auf textilimprofil.de): der Editor- * Toggle "👁 Marstaller — Sichtbarkeit pro Gerät" (mup-visibility- * toggle.js) zeigte im Bearbeiten-Modus korrekt "jetzt versteckt" * an und schrieb auch zuverlässig die Klassen .candor-hide-d / * .candor-hide-t / .candor-hide-m in den gespeicherten Content — * aber ES GAB NIE EINE CSS-DATEI, DIE DIESE KLASSEN DEFINIERT. * * responsive-picker.php enqueued diese Datei bereits seit v6.2.1 * (`assets/css/candor-responsive.css`), aber IMMER hinter einem * `file_exists()`-Guard, der lautlos fehlschlug, weil die Datei nie * angelegt wurde — kein Fehler, keine Warnung, die Klassen landeten * im HTML, aber kein Stylesheet kannte sie. Frontend zeigte deshalb * IMMER beide (bzw. alle drei) Geräte-Versionen gleichzeitig, exakt * Julias Beschreibung. * * Breakpoints exakt wie im Inspector-Panel selbst versprochen * (mup-visibility-toggle.js Hilfetexte): * Desktop → ab 1025px * Tablet → 641px – 1024px * Smartphone → bis 640px */ /* ── FIX 21.08.2026: Bildformen (image-shapes.css, z.B. .is-style-mup-blob/ * -rund/-oval/-hex) setzen "display: block !important;" auf einem ZWEI- * Klassen-Selektor (.wp-block-image.is-style-mup-*, Spezifitaet 0,2,0). * Die Sichtbarkeit-pro-Geraet-Regeln unten hatten bisher nur EINE Klasse * im Selektor (.candor-hide-d, Spezifitaet 0,1,0) — bei zwei !important- * Regeln entscheidet ausschliesslich die hoehere Spezifitaet, NICHT die * Reihenfolge der Dateien oder ob eine Media-Query zutrifft. Ergebnis auf * textilimprofil.de: ein per "Sichtbarkeit pro Geraet" auf Desktop * versteckt geschaltetes, aber mit einer Bildform (hier .is-style-mup-blob) * versehenes Bild blieb trotz zutreffender @media(min-width:1025px)-Regel * sichtbar (display:block) und riss durch sein eigenes aspect-ratio:1/1 * eine riesige leere Flaeche auf ("riesige Lücke", quadratisch, Höhe = * Fensterbreite). Fix: Klasse im Selektor verdreifacht * (.candor-hide-d.candor-hide-d.candor-hide-d, Spezifitaet 0,3,0) — schlaegt * damit sicher jede Zwei-Klassen-Bildform-Regel, unabhaengig von der * Ladereihenfolge der Stylesheets. Reine Verstaerkung des ohnehin * beabsichtigten Versteck-Verhaltens, keine Verhaltensaenderung an * Stellen, an denen das Verstecken bereits korrekt funktioniert hat * (mobile Ansicht war laut Live-Test bereits korrekt und bleibt * unveraendert). */ /* ── Desktop: ≥ 1025px ─────────────────────────────────────────── */ @media (min-width: 1025px) { .candor-hide-d.candor-hide-d.candor-hide-d, .candor-hide-d.candor-hide-d.candor-hide-d * { display: none !important; } } /* ── Tablet: 641px – 1024px ────────────────────────────────────── */ @media (min-width: 641px) and (max-width: 1024px) { .candor-hide-t.candor-hide-t.candor-hide-t, .candor-hide-t.candor-hide-t.candor-hide-t * { display: none !important; } } /* ── Smartphone: ≤ 640px ───────────────────────────────────────── */ @media (max-width: 640px) { .candor-hide-m.candor-hide-m.candor-hide-m, .candor-hide-m.candor-hide-m.candor-hide-m * { display: none !important; } } /* ── FIX 18.08.2026: leere Riesen-Lücke bei Desktop/Mobil-Dopplung ── * Wenn Julia den "Sichtbarkeit pro Gerät"-Toggle nutzt, entstehen im * Kadence-Editor zwei Spalten NEBENEINANDER (eine .candor-hide-d, eine * .candor-hide-m) mit fest eingebrannter Desktop-Editor-Breite * (z.B. grid-template-columns: 902px 902px). Nur der INHALT der * jeweils unpassenden Spalte wird oben ausgeblendet (display:none auf * jedes Kind) — die Spalte selbst bleibt aber Teil des CSS-Grids, und * per Grid-Voreinstellung (align-items:stretch) übernimmt die jetzt * leere Spalte trotzdem die volle Höhe der sichtbaren Spalte. Ergebnis: * eine riesige leere Fläche zwischen "Jetzt entdecken"-Button und dem * nächsten sichtbaren Inhalt (auf allen Geräten, nicht nur mobil) — * exakt das von Gregor gemeldete Bild. Da eine Zeile mit * .candor-hide-*-Spalten laut Konstruktion IMMER nur eine der beiden * Spalten gleichzeitig zeigt, ist Nebeneinander-Layout hier nie * sinnvoll — deshalb generell (nicht nur pro Breakpoint) auf eine * einzelne, an den Inhalt angepasste Spalte zurückgestellt. */ .kt-row-column-wrap:has(> .wp-block-kadence-column.candor-hide-d), .kt-row-column-wrap:has(> .wp-block-kadence-column.candor-hide-t), .kt-row-column-wrap:has(> .wp-block-kadence-column.candor-hide-m) { grid-template-columns: 1fr !important; align-items: start !important; } /* ── FIX 26.08.2026: Kadence-Mobil-Menü-Icon auf schmalen Hochformat- * Bildschirmen (iPhone, ~375-430px Breite) unsichtbar, obwohl Fläche * klickbar blieb. Per iFrame-Test bei echten 386px Layout-Breite * (Chrome-Fenster liess sich nicht schmaler stellen, echte Diagnose * brauchte einen eingebetteten iFrame) verifiziert: das SVG-Icon * kollabiert auf width:0px (Kadences eigene Regel setzt "width:1em", * das reicht bei sehr wenig verfuegbarem Platz im Header-Flex- * Container offenbar nicht als Untergrenze). Bei Landscape (~850px+) * und am MacBook (Desktop) trat der Fehler nicht auf -- reiner * Breiten-Bug, kein Safari/WebKit-spezifischer Bug (wie zunaechst * vermutet, siehe #287-Vorgeschichte -- hier aber eine andere, * eigenstaendige Ursache). Fix: Icon bekommt eine erzwungene * Mindestgroesse, die Flex-Shrink nicht unterschreiten kann. * * NACHBESSERUNG 26.08.2026, ZWEITER ROOT CAUSE (Gregor, zweite und dritte * Rückmeldung nach jeweils einem Live-Test): "menü ist da, noch immer zu * nah am rand" (nach margin-right:12px) und danach weiterhin "noch immer * zu sehr am rand ... muss weiter nach links" (nach margin-right:20px auf * mehreren Ebenen). Live per Chrome-Fernsteuerung (eingebetteter iFrame, * echte 386-390px Layout-Breite) systematisch durchgemessen, WARUM margin * keine sichtbare Wirkung zeigte: Kadence rendert die rechte Header-Spalte * (.site-header-main-section-right) als eigene, auf ihren Inhalt * AUTO-BREITE Spalte -- erhöht man das margin-right eines Kindelements, * wächst nur die Spalte selbst nach LINKS (bzw. die zusätzliche Breite * verschwindet unsichtbar in der Padding-Zone von .site-container), das * sichtbare Icon selbst bleibt exakt an derselben Pixel-Position stehen -- * bestätigt durch mehrfaches Messen bei margin-right 12/20/40px, jeweils * IDENTISCHE rect.right-Position. Auch ein CSS-transform (das diese * Grid/Flex-Eigenart eigentlich umgeht) zeigte keine Wirkung -- Ursache * dort: Kadence hat zwei dauerhaft "laufende" Web-Animations-API-Effekte * auf #mobile-toggle (element.animate(), nicht CSS @keyframes), die JEDE * transform-Deklaration -- auch inline mit !important -- bei jedem Frame * überschreiben (Web-Animation-Effekte stehen in der CSS-Kaskade über * jeder Autoren-Deklaration, auch !important). Fix, der beide Fallen * umgeht: position:relative + right-Offset. Das ist (a) keine transform- * Eigenschaft, daher von den Web-Animations unberührt, und (b) ein reiner * Objekt-Offset nach der Layoutberechnung (wie bei transform bleibt der * ursprüngliche Platzbedarf im Fluss erhalten, es wird nur die * Anzeigeposition verschoben) -- daher auch nicht von der Auto-Breiten- * Spalte "aufgesaugt" wie es bei margin/padding der Fall war. Vor dem * Release bereits per WordPress-Customizer live veröffentlicht und mit * demselben Messverfahren verifiziert (Lücke zum Bildschirmrand wuchs * exakt um den gesetzten Offset-Wert). */ @media (max-width: 640px) { #mobile-toggle, #mobile-toggle .menu-toggle-icon, #mobile-toggle .kadence-svg-iconset, #mobile-toggle svg { flex-shrink: 0 !important; min-width: 24px !important; width: 24px !important; height: 24px !important; } #mobile-toggle { position: relative !important; right: 20px !important; } }