/* ========================================================================== es-nachtrag.css – Punkt A1 "Pillen in Artikel- und Gruppenkacheln" (09.11.2026) Wird NACH ernst-stein.css eingebunden. Gemessen auf develop bei 360/390/430 px (Touch) sowie 768/1280 px, angemeldet, DE/EN/FR (Bericht: a1-pillen/BERICHT.md). Geltungsbereich - Abschnitte 1, 3, 4, 5: nur die Kachelraster des Shops im Zwei-Spalten-Modus (body.es-mobile-active … .uk-mobile-2-columns) UND nur in den Breiten, in denen ernst-stein.css die Handy-/Tablet-Kachel gestaltet. Achtung: es-mobile-active setzt ernst-stein-mobile.js bis 1366 px – ohne die Media-Queries wuerden die Regeln auch am Desktop (z. B. 1280 px) greifen. Abschnitte 1 und 5: <= 767 px sowie 600–1199 px hochkant. Abschnitte 3 und 4: alle Breiten <= 1199 px, also AUCH Tablet quer. - Abschnitt 2 (Status-Pille der Gruppenkacheln) gilt bewusst auf allen Breiten. - Status-Pillen und Mengeneinheit auf Tablet QUER (768–1199 px, landscape) bleiben unberuehrt: dort setzt ernst-stein.css sie mit !important (siehe offene Fragen im Bericht). Gruppen-Preis und Gruppen-Hinweis (Abschnitte 3/4) greifen dort dagegen (Pruefung 09.11.: 1024 x 768 gemessen). Startseite und Leistungen enthalten keine dieser Raster und bleiben unberuehrt. Die Selektoren haben dieselbe Form (und damit dieselbe Spezifitaet) wie die Regeln in ernst-stein.css, die sie abloesen; sie gewinnen nur durch die spaetere Einbindung. Staerker ist kein Selektor. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Status-Pillen auf dem Bild (.ribbon: "Wieder verfuegbar", "Deal", kuenftig "Neu", "Ausblendmenge erreicht" …) Vorher: 7,75 px (Tablet hochkant 7,5 px) in Versalien mit Sperrung – kaum lesbar und trotzdem breit. Bei 360 px stiess "WIEDER VERFUEGBAR" an die Lupe mit Bildzaehler ("2 🔍"). Jetzt: normale Schreibweise, 9,5 px, ohne Sperrung – lesbarer UND schmaler. Der Behaelter laesst rechts Platz fuer die Lupe samt Zaehler (bis 44 px breit + 8 px Rand), die Pille darf schrumpfen. Passt ein Text trotzdem nicht in eine Zeile ("Ausblendmenge erreicht"), bricht er in der Pille um statt abgeschnitten zu werden oder die Lupe zu verdecken. Kuerzere Texte sind im Bericht vorgeschlagen. -------------------------------------------------------------------------- */ @media (max-width: 767px), (min-width: 600px) and (max-width: 1199px) and (orientation: portrait) { body.es-mobile-active :is(#ProductGrid,#ProductGroupGrid,#RememberListContainer).uk-mobile-2-columns .ProductItem .ribbon_container { max-width: calc(100% - 58px); gap: 3px; padding: 5px 0 0 5px; } body.es-mobile-active :is(#ProductGrid,#ProductGroupGrid,#RememberListContainer).uk-mobile-2-columns .ProductItem .ribbon_container .ribbon { flex: 0 1 auto; min-width: 0; max-width: 100%; height: auto; min-height: 24px; border-radius: 12px; font-size: 9.5px; line-height: 1.15; letter-spacing: 0; text-transform: none; white-space: normal; } body.es-mobile-active :is(#ProductGrid,#ProductGroupGrid,#RememberListContainer).uk-mobile-2-columns .ProductItem .ribbon_container .ribbon > span { display: block; padding: 4px 8px; /* Plattform (style.css): .ProductItem .imgbox .ribbon_container .ribbon span { text-transform: uppercase } */ text-transform: none; overflow-wrap: normal; } /* Die Plattform liefert die Texte klein ("wieder verfuegbar", "available again", "livrable"); ohne Versalien bekommt nur der erste Buchstabe einen Grossbuchstaben. "DEAL" bleibt, wie geliefert, gross. */ body.es-mobile-active :is(#ProductGrid,#ProductGroupGrid,#RememberListContainer).uk-mobile-2-columns .ProductItem .ribbon_container .ribbon > span::first-letter { text-transform: uppercase; } /* Pruefung 09.11.: float, damit ::first-letter oben auch greift, wenn das Symbol sichtbar ist (ab 480 px, z. B. Tablet hochkant 768 px). Als Inline-Block vor dem Text verhinderte es den Grossbuchstaben ("wieder verfuegbar"). */ body.es-mobile-active :is(#ProductGrid,#ProductGroupGrid,#RememberListContainer).uk-mobile-2-columns .ProductItem .ribbon_container .ribbon .fa { float: left; margin-right: 4px; font-size: 9px; line-height: inherit; } } /* Das Symbol (Wuerfel = Bestand) ist Schmuck; auf schmalen Kacheln kostet es 15 px, die dem Text fehlen. Ab 480 px Viewport ist es wieder da. */ @media (max-width: 479px) { body.es-mobile-active :is(#ProductGrid,#ProductGroupGrid,#RememberListContainer).uk-mobile-2-columns .ProductItem .ribbon_container .ribbon .fa { display: none; } } /* -------------------------------------------------------------------------- 2. Status-Pille auf GRUPPENkacheln ("DEAL"/"REMISE") Vorher: eckiges, flaches Etikett ohne Abstand zum Bildrand, weil die Pillen-Gestaltung in ernst-stein.css nur fuer :not(.ProductGroup) gilt. Jetzt dieselbe Pille wie auf Artikelkacheln (Werte aus ernst-stein.css uebernommen) – auf allen Breiten. Auf dem Handy/Tablet hochkant gilt zusaetzlich Abschnitt 1 (spezifischer, gewinnt). -------------------------------------------------------------------------- */ body :is(#ProductGrid,#ProductGroupGrid,#RememberListContainer,#GroupModalContent) .ProductItem.ProductGroup .ribbon_container { position: absolute; top: 0; left: 0; z-index: 2; gap: 4px; max-width: calc(100% - 42px); padding: 6px 0 0 6px; box-sizing: border-box; pointer-events: none; } body :is(#ProductGrid,#ProductGroupGrid,#RememberListContainer,#GroupModalContent) .ProductItem.ProductGroup .ribbon_container .ribbon { height: 30px; min-height: 30px; border: 1px solid #ffffffb8; border-radius: 999px; background: var(--es-primary, #f58713); box-shadow: 0 3px 10px #2e272121; color: #fff; font-size: 9.5px; letter-spacing: .045em; } body :is(#ProductGrid,#ProductGroupGrid,#RememberListContainer,#GroupModalContent) .ProductItem.ProductGroup .ribbon_container .ribbon > span { padding: 0 10px; } /* -------------------------------------------------------------------------- 3. Preis-Pille der GRUPPENkacheln ("11 € - 13,50 €") Vorher: 16 px (Pruefung 09.11. nachmittags: develop liefert 14 px) – auf dem Handy groesser als die Preis-Pille der Artikelkacheln (12,5 px) und bei 360 px bis 77–78 % der Kachelbreite ("1.100 € - 1.198 €"). Jetzt gleiche Groesse und Hoehe wie bei Artikeln. Ab 1200 px bleibt die Desktop-Gestaltung (14,9 px). -------------------------------------------------------------------------- */ @media (max-width: 1199px) { body.es-mobile-active :is(#ProductGrid,#ProductGroupGrid,#RememberListContainer).uk-mobile-2-columns .ProductItem.ProductGroup .pricebox { max-width: calc(100% - 5px); /* Kopfkachel der Gruppenseite: Plattform gibt der Box 10 px Padding (style.css: .ProductItem > .uk-card-default .pricebox); das Padding sitzt hier einheitlich am Preis. */ padding: 0; white-space: nowrap; } body.es-mobile-active :is(#ProductGrid,#ProductGroupGrid,#RememberListContainer).uk-mobile-2-columns .ProductItem.ProductGroup .pricebox .price { font-size: 12.5px; /* !important noetig: die Plattform setzt das Padding als style-Attribut (style="padding: 10px 5px 10px 10px") direkt am Element. */ padding: 7px 10px 7px 11px !important; } } /* -------------------------------------------------------------------------- 4. Gruppen-Hinweise ("Alle Gruppenartikel enthalten:", "Manche …", FR "Tous les articles de la collection comprennent :") Vorher: 12 px fett, bei 360 px bis zu 3 Zeilen. Jetzt 11 px – bei den heutigen Texten hoechstens 2 Zeilen (automatische Silbentrennung wurde getestet und verworfen: "Gruppenarti-kel"). Kuerzere Texte sind im Bericht vorgeschlagen (Text kommt aus der Plattform). -------------------------------------------------------------------------- */ @media (max-width: 1199px) { body.es-mobile-active :is(#ProductGrid,#ProductGroupGrid,#RememberListContainer).uk-mobile-2-columns .ProductItem.ProductGroup .productGroupAttributes > strong { display: block; /* !important noetig: der Hinweis "Alle Gruppenartikel enthalten:" traegt style="color: #666; font-size: 12px;" direkt am Element (Plattform). */ font-size: 11px !important; line-height: 1.3; letter-spacing: -.005em; } } /* -------------------------------------------------------------------------- 5. Mengeneinheit neben dem Mengenfeld ("Pr.", "St.", "Unité") auf dem Tablet hochkant: vorher 7,75 px. Jetzt 9,5 px, Platz ist vorhanden. -------------------------------------------------------------------------- */ @media (min-width: 600px) and (max-width: 1199px) and (orientation: portrait) { body.es-mobile-active :is(#ProductGrid,#RememberListContainer,#ProductGroupGrid).uk-mobile-2-columns .ProductItem:not(.ProductGroup) .product-unit { max-width: 34px; font-size: 9.5px; } } /* ========================================================================== A2 (09.11.2026): Shop auf dem Handy - Kacheln bauen sich ruhiger auf. Messung und Begruendung: visuell2/a2-laden/BERICHT.md. Gehoert zu den Aenderungen in shop/category.tpl (Attribut data-es-raster + kleines Skript) und shop/es-navigation.tpl (jetzt oben in #MainContentContainer); Bilder: layout/js/es-shop-tempo.js. Zurueck: diesen Teil bis zum Dateiende loeschen. ========================================================================== */ /* -------------------------------------------------------------------------- A2-1. Raster-Regeln ab dem ersten Bild. ernst-stein.css bindet die mobilen Abstaende der Shop-Seiten an den Zustandsmerker [data-hat~="productgrid"] am . Den setzt ernst-stein-zustand.js erst, wenn #ProductGrid gelesen ist - bei ~195 von ~260 KB HTML. Der Browser malt vorher schon einmal (Kopf, Suchkasten), danach sprang alles um 18 px nach oben (Layoutverschiebung 0,05 auf jeder Shop-Seite). Hier dieselben Regeln (gleiche Werte, gleiche Spezifitaet, dieselbe Reihenfolge; erzeugt aus ernst-stein.css 20261103-r2), gebunden an Marken, die schon im HTML stehen, bevor der Kopf kommt: section.ContentSection[data-es-raster] (category.tpl, nur angemeldet - dann gibt es #ProductGrid immer) und .es-shopstart-page (Shop-Startseite, hat #ProductGrid immer). Sobald der Merker gesetzt ist, aendert sich nichts mehr. Die verschachtelte Regel (Tablet quer UND <=767 px) ist in ernst-stein.css wirkungslos und fehlt hier. Achtung CSS-Neubau: ernst-stein-v2.css braucht dieselbe fruehe Bindung. -------------------------------------------------------------------------- */ @media (max-width:767px) { body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page) { padding:12px 0 calc(68px + env(safe-area-inset-bottom,0px))!important; } body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page)>.container-fluid { width:100%!important; max-width:100%!important; margin:0!important; padding-right:max(12px,env(safe-area-inset-right,0px))!important; padding-left:max(12px,env(safe-area-inset-left,0px))!important; box-sizing:border-box!important; } body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page)>.container-fluid>.uk-width-1-1 { margin:0!important; padding:0!important; } body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page)>.container-fluid>.uk-flex.uk-flex-wrap.uk-flex-top[data-uk-grid] { display:block!important; width:100%!important; margin:0!important; } body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page)>.container-fluid>.uk-flex.uk-flex-wrap.uk-flex-top[data-uk-grid]>.uk-width-medium\@l, body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page)>.container-fluid>.uk-flex.uk-flex-wrap.uk-flex-top[data-uk-grid]>.MainContentContainer { margin:0!important; padding:0!important; } } @media (min-width:600px) and (max-width:1199px) and (orientation:portrait) { body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page) { padding:18px 0 calc(68px + env(safe-area-inset-bottom,0px))!important; } body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page)>.container-fluid { width:100%!important; max-width:100%!important; margin:0!important; padding-right:max(16px,env(safe-area-inset-right,0px))!important; padding-left:max(16px,env(safe-area-inset-left,0px))!important; box-sizing:border-box!important; } body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page)>.container-fluid>.uk-width-1-1 { margin:0!important; padding:0!important; } body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page)>.container-fluid>.uk-flex.uk-flex-wrap.uk-flex-top[data-uk-grid] { display:block!important; width:100%!important; margin:0!important; } body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page)>.container-fluid>.uk-flex.uk-flex-wrap.uk-flex-top[data-uk-grid]>.uk-width-medium\@l, body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page)>.container-fluid>.uk-flex.uk-flex-wrap.uk-flex-top[data-uk-grid]>.MainContentContainer { margin:0!important; padding:0!important; } } @media (max-width:1199px) { body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page) .es-shop-header-row { align-items:stretch!important; width:100%!important; height:auto!important; min-height:0!important; margin:0 0 12px!important; padding:0!important; } } @media (max-width:599px) { body.shop-ernststein.es-mobile-active:not(#_) main .ContentSection:where([data-es-raster], .es-shopstart-page) .es-shop-header-row { margin-bottom:9px!important; } } /* -------------------------------------------------------------------------- A2-2. Kachelbilder: ruhige Bildflaeche und weiches Einblenden. Die Bildflaeche hat ihr Format schon (aspect-ratio 600/492 in ernst-stein.css), blieb bis zum Bild aber weiss und das Bild sprang dann hinein. data-es-bild an der .imgbox setzt layout/js/es-shop-tempo.js: laedt - Bild noch nicht da: Titelbild unsichtbar, Flaeche hell getoent da - eben geladen: Bild blendet in 0,28 s ein, Toenung blendet aus da-sofort - war schon im Speicher: keine Animation Die Toenung ist ein Innenschatten, weil ernst-stein.css den Hintergrund der Bildflaeche mit :not(#_):not(#_) ... !important auf Weiss festlegt - der Schatten liegt ueber dem Hintergrund und unter dem Bild, ohne dass diese Regel ueberstimmt werden muss. Ohne das Skript fehlt das Attribut, alles bleibt wie bisher. Opazitaet laeuft auf der Grafikkarte; der Schatten wird nur an den 2-6 sichtbaren Kacheln einmal neu gemalt. */ .imgbox[data-es-bild="laedt"] { box-shadow: inset 0 0 0 100vmax #f4efe8; } .imgbox[data-es-bild="laedt"] > img:first-of-type { opacity: 0; } .imgbox[data-es-bild="da"] { transition: box-shadow 0.28s ease-out; } /* Pruefung 09.11.2026: Das Bild blendet per Animation ein, nicht per transition - ernst-stein.css setzt die transition der Kachelbilder mit !important fest (Desktop: "transform 260ms", Handy <=999 px Touch: "none"), eine opacity-transition griff deshalb nie, das Bild sprang hart in die Flaeche. Eine Animation laeuft unabhaengig davon (nur opacity, Grafikkarte) - ohne !important. */ @keyframes es-bild-ein { from { opacity: 0; } to { opacity: 1; } } .imgbox[data-es-bild="da"] > img:first-of-type { animation: es-bild-ein 0.28s ease-out; } @media (prefers-reduced-motion: reduce) { .imgbox[data-es-bild="da"] { transition: none; } .imgbox[data-es-bild="da"] > img:first-of-type { animation: none; } } /* Sparmodus (schwache Geraete, Skript in header.tpl setzt html.es-lite): ohne Einblenden */ html.es-lite .imgbox[data-es-bild="da"] { transition: none; } html.es-lite .imgbox[data-es-bild="da"] > img:first-of-type { animation: none; } /* -------------------------------------------------------------------------- A2-3. Lange Artikelraster: Kacheln ausserhalb des Bildes ueberspringen (nur Touch-Geraete). category.js haengt je Nachladen 60 Kacheln auf einmal an (mit UIkit-Bausteinen je Kachel); am Handy war das eine Sperre von 500-600 ms - mitten im Wischen. content-visibility:auto laesst den Browser Layout und Malen der Kacheln ueberspringen, die (noch) nicht im Bild sind. Gemessen (CPU 4x, Fast 4G, Seite "Neu"): blockierte Zeit beim Laden ~1300 -> ~1000 ms, beim Scrollen ~1000 -> ~650 ms. - Erst ab der 9. Kachel: die ersten Reihen sollen sofort und ohne Zusatz-Durchgang erscheinen (mit der Regel ab Kachel 1 kam die erste Kachel 200-400 ms spaeter). - contain-intrinsic-size "auto 424px": Platzhalterhoehe = gemessene Kachelhoehe am Handy (390 px, zweispaltig); einmal gezeigte Kacheln merken sich ihre echte Hoehe. - overflow-clip-margin: content-visibility schneidet sonst alles ab, was ueber die Kachel hinausragt (Schatten, gestapelte Karten der Artikelgruppen) - mit 24 px Rand sieht es aus wie vorher (Bildvergleich im Bericht). Zurueck: diesen Block loeschen. */ @media (hover: none) and (pointer: coarse) { body.shop-ernststein #ProductGrid > .item:nth-child(n+9) { content-visibility: auto; contain-intrinsic-size: auto 424px; overflow-clip-margin: 24px; } /* Pruefung 09.11.2026: Kachel mit offenem Hinweis-Popup [+] (Merker data-es-popup aus es-shop-tempo.js, Teil 3) ohne Einschluss und vor den Nachbarn - sonst schnitt die Kachelkante das 300 px breite Popup ab (bis 122 px, samt Schliessen-Kreuz) und die Nachbarkachel malte darueber. z-index wirkt an Flex-/Grid-Kindern auch ohne position. */ body.shop-ernststein #ProductGrid > .item[data-es-popup] { content-visibility: visible; z-index: 2; } } /* -------------------------------------------------------------------------- A2-4. Kopf des Rasters bis zur ersten Antwort (data-es-raster, category.tpl). category.js laedt die Artikel per Ajax (loadArticles) und schaltet erst danach um: Sortierung zeigen, Umschalter "einspaltig" verstecken (nur Kacheln), Ladekreisel verstecken (letzte Seite). Am Handy rutschte dabei alles darunter: Sortierung 72 px, Umschalter 52 px, der Ladekreisel von der Bildmitte nach unten (Ausverkauf: Layoutverschiebung 0,15). category.tpl schreibt in die Sektion, was zu erwarten ist; ein Skript dort setzt nach der ersten Antwort "fertig" - ab da gelten nur noch die Klassen von category.js. Keine Regel hier aendert Klassen oder Inline-Stile; category.js bleibt der einzige, der umschaltet. !important ist noetig, weil UIkit .uk-hidden und jQuery .show() (style="display: block") mit !important bzw. am Element arbeiten. -------------------------------------------------------------------------- */ /* a) Artikel zu erwarten: Sortierung nimmt ihren Platz schon ein, bleibt aber unsichtbar. flex = Anzeige, wenn category.js sie zeigt (gemessen 390/768/1024/1280 px). */ body.shop-ernststein .ContentSection[data-es-raster="artikel"] .CategoryHeaderBox > .es-shop-sort-col.uk-hidden { display: flex !important; visibility: hidden; } /* b) Nur Unterkategorie-Kacheln: Umschalter ein-/zweispaltig gar nicht erst zeigen (category.js versteckt ihn nach der Antwort ohnehin). Kommen doch Artikel, erscheint er mit "fertig" wieder. */ body.shop-ernststein .ContentSection[data-es-raster="kacheln"] #Mobile-Shop-Grid-Switcher { display: none !important; } /* c) Ladekreisel: bis zur ersten Antwort NICHT der echte #searchLoader (er steht unter dem leeren Raster und rutschte mit den Artikeln aus dem Bild - das zaehlt als Verschiebung), sondern eine gleich grosse Flaeche am Anfang des Rasters mit demselben Kreisel an derselben Stelle (UIkit-Spinner nachgebaut: 75 px, Linie 1 px #343434, 1,4 s; Masse gemessen bei 390/768/1024/1280/1600 px). Mit der ersten Antwort verschwindet die Flaeche, die Artikel stehen an ihrer Stelle; der echte Kreisel erscheint - falls noch Seiten folgen - unten neu (Erscheinen ist keine Verschiebung) und gehoert wieder allein category.js. */ body.shop-ernststein .ContentSection[data-es-raster="artikel"] #searchLoader, body.shop-ernststein .ContentSection[data-es-raster="kacheln"] #searchLoader { display: none !important; } body.shop-ernststein .ContentSection[data-es-raster="artikel"] #ProductGrid::before { content: ""; display: block; grid-column: 1 / -1; flex: 0 0 100%; width: 100%; height: 135px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='75'%20height='75'%20viewBox='0%200%2030%2030'%3E%3Cstyle%3Eg%7Btransform-origin:15px%2015px;animation:r%201.4s%20linear%20infinite%7Dcircle%7Btransform-origin:15px%2015px;stroke-dasharray:88px;stroke-dashoffset:0;animation:d%201.4s%20ease-in-out%20infinite%7D@keyframes%20r%7B0%25%7Btransform:rotate(0)%7D100%25%7Btransform:rotate(270deg)%7D%7D@keyframes%20d%7B0%25%7Bstroke-dashoffset:88px%7D50%25%7Bstroke-dashoffset:22px;transform:rotate(135deg)%7D100%25%7Bstroke-dashoffset:88px;transform:rotate(450deg)%7D%7D%3C/style%3E%3Cg%3E%3Ccircle%20fill='none'%20stroke='%23343434'%20stroke-width='.4'%20stroke-linecap='round'%20cx='15'%20cy='15'%20r='14'/%3E%3C/g%3E%3C/svg%3E") center / 75px 75px no-repeat; } /* Ab 1200 px wie das Original: uk-padding 40 px (Hoehe 155 px), Raster mit -15 px Rand, und style.css schiebt den Kreisel um 150 px nach links (#searchLoader .uk-spinner, translateX(-150px)) - Mitte = Fenstermitte. */ @media (min-width: 1200px) { body.shop-ernststein .ContentSection[data-es-raster="artikel"] #ProductGrid::before { height: 155px; background-position: calc(50% - 142.5px) 50%; } }