/** Shopify CDN: Minification failed Line 1197:4 Expected percentage but found "entry" Line 1197:10 Expected "," but found "0%" Line 7413:0 Unexpected "}" **/ /* ═══ IN EINER CSS-EBENE (@layer s304) ═══════════════════════════════════ 22.09.2026. Diese Datei liegt vollstaendig in der Ebene `s304`. ⭐⭐ WARUM — live getestet, mit Positivkontrolle: Regel in der ersten Ebene, Waehler `.probe` (0,1,0) gegen spaetere Regel `html body div#id p#id.class` (1,2,4) → DIE EBENE GEWINNT. Ohne Ebene verliert dieselbe Regel. Damit ist der Spezifitaetskrieg vorbei: diese Seite hat 39 CSS-Ebenen, meine Datei ist Nummer 16, und 23 kommen danach. Ueber die Ebene gewinne ich trotzdem — ohne lange Waehlerketten, ohne Klassen zaehlen. ⛔ WAS DIE EBENE NICHT SCHLAEGT: ein `!important` direkt am Element (`style="…"`, von fremdem JS gesetzt). Getestet, es bleibt unschlagbar. Diese ~6 Faelle erledigt `s304-haus.js`. ⛔ JEDE ANGABE HIER BRAUCHT `!important` — und zwar aus einem genauen Grund: alles andere im Theme ist UNGESCHICHTET, und fuer normale Angaben gewinnt Ungeschichtetes. Nur bei `!important` dreht sich die Reihenfolge um. Das ist kein Rueckfall in das alte Muster: es sind nicht mehr 2.835 Einzelgefechte, sondern EINE Aussage — diese Ebene gewinnt. ═══════════════════════════════════════════════════════════════════════ */ @layer s304 { /* ═══ S304-HAUS · die Möbel, auf JEDER Seite ═══════════════════════════════ 22.09.2026. Dritte Datei der Familie: `s304-pdp.css` (Produktseite), `s304-kat.css` (Kategorie), und hier das, was überall gleich ist — Fußzeile mit Impressum, Schubladen (Warenkorb + Menü), Kopfleiste. ⛔ WARUM ES DIESE DATEI GIBT — Enzos Ansage, wörtlich: „wir wollen alles, alles so ein bisschen, also unten Futter und so, das soll alles so ein bisschen so sein." Und: „kriegen wir das nicht einfach raus, alles andere rauszunehmen und einfach mal unseren Kram zu machen?" Er hat recht, und der Grund ist messbar: die Arbeitskopie 189042917757 wurde am 22.09. vom AKTUELLEN Live-Theme dupliziert, nicht vom ältesten. Sie erbt damit `304-custom.css` mit 378.605 Zeichen und 2.835 `!important`. Gegen diese Schicht anzuschreiben erzeugt Block 45, 46, 47. Stattdessen: EINE Haus-Schicht, die alle Flächen gleich behandelt, und die alte Schicht wird Stück für Stück stillgelegt statt überboten. ⭐ ALLE WERTE HIER SIND LIVE GEMESSEN, nicht gewählt: footer.site-footer-wrapper 387×233 schwarz r0 T4478 .s304-legal 355×57 Impressum · AGBs · Widerrufsrecht · Datenschutz · Retoure .s304-social 355×22 .drawer__inner 387×812 weiss r0 .ic-top-ticker 355×32 schwarz r22 (schon im Kastenstil) ═════════════════════════════════════════════════════════════════════════ */ :root{ --s304-rand:16px !important; --s304-r:22px !important; --s304-ink:#15130F !important; --s304-leise:#8A837C !important; --s304-linie:#ECE7E0 !important; --s304-wurf: 0 16px 36px -14px rgba(24,24,26,.44), 0 3px 8px -2px rgba(24,24,26,.13) !important; } /* ── 1 · Das Band, auf JEDER Seite gleich ──────────────────────────────── Stand bisher nur auf der PDP und der Kategorie im Kastenstil. Enzos Punkt war genau das: es soll ÜBERALL so sein. */ html body .ic-top-ticker{ margin:0 var(--s304-rand) !important; border-radius:var(--s304-r) !important; background:#000 !important; overflow:hidden !important; } /* ── 2 · Die Fußzeile: ein Kasten, kein randloser Balken ───────────────── Gemessen: sie ist heute 387 breit und randlos schwarz. Im Kastenstil wird sie eingerückt und rund — dieselbe Sprache wie Band und Karten. */ html body footer.site-footer-wrapper{ margin:0 var(--s304-rand) 20px !important; border-radius:var(--s304-r) !important; overflow:hidden !important; background:#000 !important; } html body footer.site-footer-wrapper .site-footer{ padding-left:18px !important; padding-right:18px !important; } /* Die Rechtslinks — Impressum und Nachbarn. Sie sind das Kleingedruckte, also leise, aber mit ehrlichem Tippziel (44 px, nicht 14 px Text). */ html body .s304-legal a{ font-size:11.5px !important; font-weight:500 !important; letter-spacing:.02em !important; color:rgba(255,255,255,.72) !important; text-decoration:none !important; padding:6px 2px !important; display:inline-block !important; min-height:0 !important; } html body .s304-legal a:hover, html body .s304-legal a:focus-visible{ color:#FFFFFF !important; text-decoration:underline !important; } html body .s304-social a{ padding:9px !important; display:inline-flex !important; align-items:center !important; } /* ── 3 · Die Schubladen: Warenkorb und Menü ────────────────────────────── Beide teilen `.drawer__inner`. Sie kommen von rechts bzw. links herein, darum bekommen nur die INNEREN Ecken einen Radius — eine Schublade, die an allen vier Ecken rund ist, sieht aus, als schwebe sie im Nichts. */ html body .drawer--cart .drawer__inner, html body cart-drawer .drawer__inner{ border-radius: var(--s304-r) /* 23.09.: war `… 0 0 …`, also nur links gerundet. Seit das Blatt oben und unten schwebt, muss es ringsum rund sein — sonst stossen zwei runde und zwei spitze Ecken aneinander. */ !important; overflow:hidden !important; } html body .drawer--navigation .drawer__inner, html body .drawer--menu .drawer__inner{ border-radius:0 var(--s304-r) var(--s304-r) 0 !important; overflow:hidden !important; } /* Die Zeilen im Korb als eigene Kästchen, wie die Produktkacheln. */ html body .drawer .cart__item{ border-radius:14px !important; padding:10px !important; background:#FFFFFF !important; box-shadow:0 6px 16px -10px rgba(24,24,26,.34) !important; border:0 !important; } /* ── 4 · Tippziele, überall ────────────────────────────────────────────── ⭐ Das ist kein Schönheitspunkt: ein 14-px-Link im Fuß ist auf dem Handy nicht sicher zu treffen. 44 px ist die Untergrenze, nicht der Wunsch. */ html body .header__mobile__hamburger, html body .header__cart, html body .header__account{ min-width:44px !important; min-height:44px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } /* === S304-RUNDE1-HAUS-2209 · die letzte eckige Farbflaeche =============== Die Sonde meldete auf JEDER Seite: section.supporting-menu 387×97 bg rgb(0,0,0) r0 Das ist der zweite Fussblock unter der Fusszeile — randlos schwarz, waehrend die Fusszeile darueber schon eingerueckt und rund ist. Zwei schwarze Floeze direkt uebereinander, eins rund, eins eckig: genau der Bruch, den Enzo „zwei Sachen ueberschrieben" nennt. ⭐ Sie gehoeren zusammen: der obere Block behaelt runde Ecken oben, dieser bekommt sie unten, dazwischen bleibt die Kante gerade. So lesen sie als EIN Kasten statt als zwei. ========================================================================= */ html body footer.site-footer-wrapper{ margin-bottom:0 !important; border-radius:var(--s304-r) var(--s304-r) 0 0 !important; } html body section.supporting-menu{ margin:0 var(--s304-rand) 20px !important; border-radius:0 0 var(--s304-r) var(--s304-r) !important; overflow:hidden !important; } /* === S304-RUNDE2-HAUS-2209 · Tippziele im Fuss =========================== Die Sonde: `a.s304-legal__link 67×29`, fuenfmal, plus die Copyright-Zeile mit 16 px. Meine erste Fassung gab 6 px Polster — 11,5 + 12 = 29, also immer noch unter der 36er-Grenze. ⭐ Nicht nach Gefuehl nachbessern: 36 - 14 (Zeilenhoehe bei 11,5 px) = 22, also 11 px oben und unten. Ich nehme 12, damit auch die laengere Zeile „Retoure & Miles-Gutschrift" bei Umbruch nicht drunterfaellt. ========================================================================= */ html body .s304-legal a, html body .s304-legal__link{ padding:12px 4px !important; min-height:38px !important; display:inline-flex !important; align-items:center !important; } html body footer.site-footer-wrapper a, html body section.supporting-menu a{ min-height:36px !important; display:inline-flex !important; align-items:center !important; } /* === S304-RUNDE3-HAUS-2209 · Impressum auf der Startseite ================ ⛔⛔ BEFUND, den die Sonde gefunden hat und den ich fast uebersehen haette: die Startseite hat GAR KEINE Fusszeile — und damit keinen Impressum-Link. Ursache, gemessen (kein Verdacht): [inline] body.template-index .footer-sections{ display:none !important } Das ist ABSICHT: die Startseite ist ein Vollbild-Held (Seitenhoehe 827, Held 794). ⭐ Und es ist NICHT von mir — im LIVE-Theme genauso gemessen: Fusszeile 0×0, „Impressum" kommt im ganzen Seitentext nicht vor. Warum ich es trotzdem anfasse: in Deutschland muss das Impressum von JEDER Seite unmittelbar erreichbar sein. Die Startseite ist die meist- besuchte. Das ist der klassische Abmahnfall. ⭐ Die Loesung nimmt dem Entwurf nichts: der Held bleibt unberuehrt, es kommt nur eine schmale Rechtszeile UNTER ihn. Logo, Sozial-Symbole und der zweite Fussblock bleiben auf der Startseite aus — ich hebe die Entscheidung nicht auf, ich mache nur die Pflichtangabe erreichbar. ========================================================================= */ html body.template-index .footer-sections{ display:block !important; } html body.template-index .footer-sections .shopify-section-group-group-footer{ display:block !important; } html body.template-index footer.site-footer-wrapper{ display:block !important; /* 01:00: Rand und Radius raus — der Fuss ist jetzt ein durchgehender Block ueber die volle Breite wie auf allen anderen Seiten (S304-FUSS-2409), nicht mehr eine eingerueckte Karte. */ padding:14px 0 2px !important; margin:0 !important; border-radius:0 !important; } /* ⛔⛔ AUFGEHOBEN 01:00 — DER GRUND VON OBEN GILT NICHT MEHR. Hier stand: „Logo, Sozial-Symbole und der zweite Fussblock bleiben auf der Startseite aus — ich hebe die Entscheidung nicht auf, ich mache nur die Pflichtangabe erreichbar." Das war am 22.09. richtig: die Startseite war ein reiner Vollbild-Held ohne Fuss. Seit dem 24.09. scrollt sie und hat unter dem Held eine Kategorie- Sektion (S304-STARTSEITE-KATEGORIEN-2409). Ein Fuss, der dort nur aus fünf Rechtslinks besteht, sieht abgeschnitten aus — **im Bild gesehen, nicht gemessen**: kein Logo, keine Symbole, keine Sprachzeile. ⭐⭐ **Eine Regel, die eine Entscheidung absichert, muss sterben, wenn die Entscheidung stirbt.** Sonst haelt sie einen Zustand fest, den niemand mehr will — und sie tut es leise, weil sie ja „absichtlich" war. Das ist heute schon die dritte dieser Art (Fuss-`:not()`, IC-Streifen-Ausschluss, diese hier). */ html body.template-index footer.site-footer-wrapper .footer__logo__wrapper, html body.template-index footer.site-footer-wrapper .s304-social, html body.template-index section.supporting-menu{ display:block !important; } html body.template-index footer.site-footer-wrapper .s304-social{ display:flex !important; } html body.template-index footer.site-footer-wrapper .s304-legal{ display:flex !important; flex-wrap:wrap !important; justify-content:flex-start !important; gap:0 18px !important; } /* ── Tippziel Logo ──────────────────────────────────────────────────────── Meine erste Fassung `html body .header__logo .header__logo__link` = 2 Klassen + 2 Typen = (0,2,2) und hat VERLOREN. Eine Klasse mehr, und zwar die, die wirklich am Element steht: `.header__logo--image`. */ /* ⛔⛔ HIER STAND EINE REGEL, DIE DAS LOGO UM 48 % GESTAUCHT HAT. Sie lautete: `min-height:41px; padding:9px 12px; display:inline-flex` auf `.header__logo__link` — und ich hatte sie geschrieben, um MEINE EIGENE Tippziel-Regel (>=36 px) zu erfuellen. Die Kette, live nachgemessen: theme.css .image-wrapper img { width:100%; height:100% } theme.css .header__logo__link { width: var(--logo-width) } s304-haus .header__logo__link { min-height:41px !important } Das Theme bemisst den Logo-Link ueber eine SERVERSEITIG gerechnete Variable; die Hoehe folgt dem Seitenverhaeltnis. Mein `min-height` hat den Kasten auf 59 px aufgeblasen, das Bild fuellt ihn (`height:100%`), die Breite blieb. Aus 70×23 (3,04) wurde 94×59 (1,59). ⭐⭐ DIE LEHRE, die heute die teuerste ist: **Meine Pruefsonde hat die Aenderung VERLANGT und kann den Schaden NICHT SEHEN.** Sie misst Kastengroessen, nicht ob ein Bild verzerrt ist. Ein Pruefer, der nur eine Achse kennt, treibt den Bau in genau die Richtung, die auf dieser Achse gut aussieht. ⭐ Der richtige Weg, falls die Trefferflaeche spaeter doch groesser soll: NICHT den Link aufblasen, sondern dem ELTERN-Element `.header__logo` Polster geben — das laesst die Bildmasse unberuehrt. Oder ein `::after` mit negativem Versatz. Hier bleibt erst einmal alles so, wie das Theme es rechnet. ⛔ Ein Logo ist ausserdem kein kritisches Tippziel: es fuehrt nach Hause, und daneben steht der Burger. Eine verzerrte Wortmarke ist der deutlich groessere Schaden. */ /* === S304-RUNDE6-HAUS-2209 · die Kachel gehört ins Haus ================== ⛔ ARCHITEKTURFEHLER, den die Sonde auf /search aufgedeckt hat: ich hatte die Produktkachel in `s304-kat.css` gestylt — und die laedt nur auf Kategorieseiten. Gemessen auf /search: `.product-item` 194×269 r0, also der alte Stil, waehrend dieselbe Kachel auf /collections/walletchains 169×235 r18 mit Wurf ist. ZWEI Gesichter fuer dasselbe Ding. ⭐ Eine Produktkachel sieht ueberall gleich aus — Suche, aehnliche Produkte, zuletzt gesehen, Cross-Sell im Korb. Also gehoert sie hierher. In `s304-kat.css` bleibt nur, was WIRKLICH kategoriespezifisch ist: der Kopf und die Raster-Raender. ⛔ Und wieder: KEIN eigenes Markup. Die drehenden Videos haengen in `.product-item__bg` — hier wird nur gestylt, nie gebaut. ========================================================================= */ html body .product-item{ background:#FFFFFF !important; border-radius:18px !important; padding:8px 8px 2px !important; box-shadow:var(--s304-wurf) !important; overflow:visible !important; } html body .product-item .product-item__image{ border-radius:12px !important; overflow:hidden !important; background:#FFFFFF !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 0 -18px 18px -16px rgba(107,107,111,.18), 0 6px 14px -6px rgba(48,48,52,.22) !important; } html body .product-item .product-information{ padding:0 !important; margin-top:6px !important; text-align:left !important; } html body .product-item .product-information .product-link{ padding:8px 0 !important; margin-bottom:-6px !important; min-height:38px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; text-decoration:none !important; } html body .product-item .wc-quick-atc{ box-sizing:content-box !important; padding:9px !important; background-clip:content-box !important; min-width:0 !important; } /* Der „2 FÜR 1"-Chip nach oben links. */ html body .product-item .product-item__image .badge-box-container{ position:absolute !important; left:6px !important; top:6px !important; bottom:auto !important; right:auto !important; transform:none !important; z-index:4 !important; } html body .product-item .product-item__image .badge-box-container .badge{ font-size:8.5px !important; font-weight:700 !important; letter-spacing:.06em !important; background:var(--s304-ink) !important; color:#FFFFFF !important; padding:3px 7px !important; border-radius:99px !important; } /* Raster: ueberall Luft zwischen den Kacheln, nicht nur in der Kategorie. */ html body .grid-outer > .grid{ gap:9px !important; padding-left:20px !important; padding-right:20px !important; } /* === S304-RUNDE7-HAUS-2209 · zugeklappte Akkordeons waren offen ========== ⛔⛔ THEME-WEITER FEHLER, gefunden von der Sonde auf ZWEI Seiten: ein `
` mit `open=false` zeigt seinen Inhalt trotzdem. Produktseite details 47 px · Antwort 90 px, 4 uebereinander Inner Circle details 66 px · Antwort 102–150 px, 5 uebereinander `overflow: visible`, `max-height: none`, und KEINE Regel setzt `display` auf die Antwort — die Vorgabe des Browsers wird von irgendetwas ausgehebelt. ⭐ Ich jage die Ursache nicht weiter, ich mache das Verhalten EXPLIZIT. Das haelt auch dann, wenn die Ursache zurueckkommt. ⛔ Warum das ernst ist und nicht kosmetisch: auf der Inner-Circle-Seite standen fuenf Antworten uebereinander im Text. Wer das liest, liest Mist. ⚠️ Nebenwirkung, bewusst in Kauf genommen: eine Hoehen-Animation beim Aufklappen braucht den Inhalt im Fluss. Wo eine war, klappt es jetzt ohne Uebergang auf. Richtig lesbar schlaegt weich animiert. ========================================================================= */ html body details:not([open]) > *:not(summary){ display:none !important; } html body details[open] > *:not(summary){ display:block !important; } /* === Graue Vollbreit-Bloecke in Kaesten ================================== Gemessen auf /pages/inner-circle: .ic-page 387×2475 #F1F1F1 r0 .ic-benefits 387×600 #F2F2F2 r0 .ic-how-it-works 387×510 #F2F2F2 r0 .ic-faq 387×491 #F2F2F2 r0 Vier randlose graue Floeze — die Sprache des alten Themes. Im Kastenstil ist der Grund weiss und die Abschnitte sind eingerueckte Karten. ========================================================================= */ html body .ic-page{ background:#FFFFFF !important; } html body .ic-benefits, html body .ic-how-it-works, html body .ic-faq{ margin:0 var(--s304-rand) 14px !important; border-radius:var(--s304-r) !important; background:#FFFFFF !important; box-shadow:var(--s304-wurf) !important; overflow:hidden !important; } /* === S304-RUNDE8-HAUS-2209 · eine Klasse zu wenig, zum dritten Mal ======= `html body .ic-page` = 1 Klasse + 2 Typen = (0,1,2). Das Element traegt `.ic-page.ic-landing`, und die Regel mit BEIDEN Klassen ist (0,2,x) und gewinnt. ⭐ Derselbe Zaehlfehler wie heute schon beim Kaufknopf und beim Logo: die Klassenspalte wird zuerst verglichen, Typen wiegen nichts auf. Regel fuer mich: **immer alle Klassen mitschreiben, die am Element stehen.** ========================================================================= */ html body .ic-page.ic-landing, html body div.ic-page.ic-landing{ background:#FFFFFF !important; } /* === S304-RUNDE9-HAUS-2209 · die Klasse, die s304-haus.js vergibt ======== `s304-haus.js` markiert jede randlose Farbflaeche mit `.s304-kasten`. Ausgenommen (absichtlich, siehe dort): Helden, Kopf, Fuss, weisse Flaechen und alles, was schon rund ist. ========================================================================= */ html body .s304-kasten{ margin-left:var(--s304-rand) !important; margin-right:var(--s304-rand) !important; margin-bottom:14px !important; border-radius:var(--s304-r) !important; overflow:hidden !important; width:auto !important; max-width:none !important; } /* === S304-RUNDE10-HAUS-2209 · Knöpfe und Felder im Haus ================== Die Sonde auf /pages/kontakt: `button.btn.btn--primary 355×36 »Senden«`. Knapp unter der Grenze — und vor allem in einer anderen Sprache als der Kaufknopf (58 hoch, r99). Ein Formularknopf und ein Kaufknopf muessen nicht gleich GROSS sein, aber gleich GEFORMT. ⛔ Der Kaufknopf bleibt bei 58: seine Regel in `s304-pdp.css` hat mehr Klassen und gewinnt. Das ist gewollt, nicht zufaellig. ⭐ Eingabefelder gleich mit: ein 36-px-Feld ist auf dem Handy dieselbe Zielscheibe wie ein 36-px-Knopf, und iOS zoomt bei Schrift unter 16 px beim Antippen in das Feld hinein — deshalb steht 16 px hier fest. ========================================================================= */ html body .btn, html body button.btn, html body input[type="submit"]{ min-height:48px !important; border-radius:99px !important; font-weight:600 !important; letter-spacing:.01em !important; text-transform:none !important; } html body input[type="text"], html body input[type="email"], html body input[type="tel"], html body input[type="search"], html body input[type="password"], html body textarea, html body select{ min-height:48px !important; border-radius:14px !important; font-size:16px !important; padding:12px 14px !important; } html body textarea{ min-height:110px !important; } /* === S304-RUNDE11-HAUS-2209 · der Knopf, der eckig blieb ================= Gemessen, wer gewinnt (nicht geraten): theme.css .cart__checkout.btn--primary border-radius:0 !important (0,2,0) s304-haus html body .btn border-radius:99 !important (0,1,2) Klassenspalte 1 < 2 → meine Regel verliert. Mit ZWEI Klassen und zwei Typen steht es 2:2 in der Klassenspalte, und die Typenspalte entscheidet zu meinen Gunsten: (0,2,2) > (0,2,0). ⭐ Das ist heute der vierte Fall desselben Zaehlfehlers. Merksatz: **so viele Klassen mitschreiben, wie der Gegner hat — dann erst zaehlen die Typen.** ⭐ Und der Fund nebenbei: das gemessene Element war gar nicht der Kontaktknopf, sondern `cart__checkout` aus der Warenkorb-Schublade. Damit bekommt der Kasse-Knopf dieselbe Form wie der Kaufknopf. ========================================================================= */ html body .btn.btn--primary, html body .btn.btn--solid, html body .btn.btn--full, html body .btn.cart__checkout, html body .btn.btn--large, html body button.btn.btn--primary, html body input.btn[type="submit"]{ border-radius:99px !important; min-height:48px !important; text-transform:none !important; } /* === S304-RUNDE12-HAUS-2209 · die Schubladen, endlich richtig benannt ==== ⛔ MEIN FEHLER: ich hatte auf `.drawer--navigation` und `.drawer--menu` gezielt. Die Menue-Schublade heisst in diesem Theme `.drawer--header`. Eine Regel auf einen Namen, den es nicht gibt, ist stumm — und sie sieht im Quelltext aus wie erledigte Arbeit. Gemessen statt vermutet: #mobile-menu-… class="drawer drawer--header is-open drawer--animated" .drawer__inner 387×812 @L0 weiss r0 Eintraege: INNER CIRCLE · WALLETCHAINS · BRACELETS · ESSENTIALS · ABOUT US · BECOME A CREATOR (342×78, 17 px) — die sind gut getroffen. Klein sind nur VERSAND & RETOUREN und FAQ (141×20, 11 px). ⚠️ Was ich hier NICHT tue: dem Menue Rechtslinks hinzufuegen. Die Menuepunkte stehen in der Shopify-Navigation, nicht im Theme — das waere eine Aenderung am Laden, nicht am Entwurf. Das Impressum ist seit RUNDE3 ueber die Fusszeile auf JEDER Seite erreichbar, auch auf der Startseite. Damit ist die Pflicht erfuellt. ========================================================================= */ html body .drawer--header .drawer__inner, html body .drawer--navigation .drawer__inner{ border-radius:0 var(--s304-r) var(--s304-r) 0 !important; overflow:hidden !important; } html body .drawer--cart .drawer__inner, html body #cart-drawer .drawer__inner{ border-radius: var(--s304-r) /* 23.09.: war `… 0 0 …`, also nur links gerundet. Seit das Blatt oben und unten schwebt, muss es ringsum rund sein — sonst stossen zwei runde und zwei spitze Ecken aneinander. */ !important; overflow:hidden !important; } html body .drawer--header .drawer__inner a{ min-height:36px !important; display:inline-flex !important; align-items:center !important; } /* === S304-RUNDE13-HAUS-2209 · Symbole im Menü ============================ Zwei Sozial-Symbole im Burger: 14×36. Die Hoehe hatte meine vorige Regel schon geholt, die BREITE nicht — `min-height` allein macht ein schmales Symbol nicht treffbar. ⭐ Bei einem Tippziel zaehlen beide Achsen; wer nur eine setzt, hat die Haelfte repariert und haelt sie fuer ganz. ========================================================================= */ html body .drawer--header .drawer__inner a, html body .s304-social a, html body footer a[href*="instagram"], html body footer a[href*="tiktok"]{ min-width:36px !important; min-height:36px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } /* === S304-RUNDE15-HAUS-2209 · die Sperrkarte liegt außerhalb ============= Mein Wähler `html body .s304-neu .ic-lock-alt` traf nie: die Sperrkarte haengt in `.ic-lock-veil`, und der Schleier sitzt NEBEN `.s304-neu`, nicht darin (gemessen: `lock.closest('.s304-neu')` === null). ⭐ Ein Waehler, der ins Leere zielt, sieht im Quelltext aus wie erledigte Arbeit — das ist heute der zweite Fall (vorher `.drawer--navigation`). Regel: **die Elternkette messen, bevor man den Geltungsbereich waehlt.** ========================================================================= */ html body .ic-lock-alt, html body .ic-lock-cta{ min-height:40px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } html body .ic-lock-card{ border-radius:var(--s304-r) !important; } /* === S304-RUNDE16-HAUS-2209 · alleinstehende Links im Fließtext ========== Die Sonde auf /pages/retoure: `a 108×15 »Widerruf & Retoure«`. Das ist kein Link MITTEN in einem Satz (die nimmt die Sonde bewusst aus), sondern einer, der allein in seinem Absatz steht — also faktisch ein Knopf, der wie Text aussieht. ⭐ `:only-child` trifft genau diesen Unterschied, ohne echte Fliesstext- Links aufzublaehen. Ein Link mitten im Satz darf 15 px hoch sein; einer, der allein in der Zeile steht, ist ein Ziel. ========================================================================= */ /* ⛔ 23.09. GESTRICHEN — hier stand: html body main p > a:only-child, html body main li > a:only-child { min-height: 36px !important; display: inline-flex !important; } Das ist der CSS-ZWILLING des JS-Fehlers, den ich heute in `linkeAlsZieleFassen()` behoben habe: **`:only-child` zaehlt nur ELEMENT-Kinder, keine Textknoten.** Ein Link mitten im Fliesstext ist damit `:only-child`, sobald er das einzige Element im Absatz ist — und bekam 36 px Hoehe. Gemessen an der Pflichtzeile: aus 14 px Zeile wurden 36. ⭐ Statt die Regel zu flicken faellt sie weg: **das Tippziel hat jetzt EINE Zustaendigkeit**, naemlich `s304-haus.js`. Dort wird auf Textknoten geprueft, was CSS gar nicht kann. Zwei Regelwerke fuer dieselbe Frage laufen unweigerlich auseinander. Gegengeprueft nach dem Streichen: 17 alleinstehende Links auf der PDP, alle weiterhin >= 36 px — das JS erledigt sie. */ /* === S304-KOPFLEISTE-2209 · die Kopfleiste wird eine Karte ============== Fassung A: margin 6px 16px 0 · h66 · r22 · eigene Flaeche. Live vorher: 402×46 @L0 · r0 · vollstaendig transparent. ⛔ WAS ICH BEWUSST NICHT ANFASSE: die HOEHE. Der Inhalt beginnt bei T78 = 32 (Band) + 46 (Kopf), und der Versatz haengt an `--header-height`. Eine Hoehenaenderung verschiebt die ganze Seite — Fassung A saehe naeher aus, aber der Preis waere ein Versatz, den ich auf jeder Flaeche nachziehen muesste. **Form ja, Mechanik nein.** ⛔ `left`/`right` statt `margin`: die Kopfleiste ist `position:absolute`. Ein `margin` VERSCHIEBT ein absolut positioniertes Element, es verengt es nicht — genau dieser Fehler hat heute frueh schon einmal das Korbsymbol aus dem Bild geschoben. ========================================================================= */ html body .theme__header{ left:16px !important; right:16px !important; width:auto !important; max-width:none !important; border-radius:22px !important; background:#FFFFFF !important; box-shadow:0 10px 26px -12px rgba(24,24,26,.40) !important; } /* Der Kopf darf innen etwas Luft haben, ohne hoeher zu werden. */ html body .theme__header .header__mobile{ padding-left:10px !important; /* 23:35 mit der Regel weiter unten gleichgezogen */ padding-right:10px !important; } /* === S304-FUSSGRUPPE-2209 · die Karte war unsichtbar, weil der Rahmen === Im Bild sah der Fuss randlos und eckig aus. Gemessen war er aber **370 @L16 r22** — also korrekt. ⭐ Die Ursache lag eine Ebene HOEHER: `footer.footer-sections` ist **402×493 @L0 und selbst schwarz**. Meine schwarze Fuss-Karte lag darin und war deshalb nicht zu unterscheiden — schwarz auf schwarz. ⛔ Das ist heute der vierte Fall, in dem mein Augenmass gegen die Messung verloren hat (der „zu dicke" Fortschrittsbalken, die „sichtbare" Fehlermeldung, das „leere" Hauptbild, jetzt der Fuss). Jedes Mal war das Element richtig und der KONTEXT falsch. **Merksatz: sieht etwas falsch aus, aber misst sich richtig — dann liegt es am Nachbarn oder am Elternteil, nicht am Element.** ========================================================================= */ html body footer.footer-sections{ background:#FFFFFF !important; } /* === S304-LOGOZIEL-2209 · Tippziel ohne Verzerrung ====================== Heute Abend habe ich `min-height:41px` auf `.header__logo__link` gesetzt, um die 36-px-Regel zu erfuellen — und damit das Logo um 48 % gestaucht (94×59 statt 70×23). Die Regel habe ich zurueckgenommen; seitdem meldet die Sonde das Tippziel wieder mit 70×23. ⭐ Der Weg, den ich damals schon in den Kommentar geschrieben, aber nicht gegangen bin: **das Polster gehoert an den ELTERNTEIL.** `.header__logo` waechst, das Bild bleibt unberuehrt — die Trefferflaeche des Links waechst mit, weil er den Elternteil ausfuellt. ⛔ `.header__logo__link` selbst bekommt NUR `display:block` und volle Flaeche — keine eigene Hoehe, kein `min-height`, nichts, was das Bild dehnen koennte. Das Bild behaelt `height:26px; width:auto`. ========================================================================= */ html body .header__logo{ padding:9px 12px !important; box-sizing:content-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } html body .header__logo .header__logo__link{ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; min-height:0 !important; height:auto !important; } /* === S304-LOGOZIEL2-2209 · jetzt ist das Polster gefahrlos ============== Der Elternteil hat nichts gebracht: der Link ist `inline-flex` und bemisst sich am Inhalt, also blieb er 70×23. ⭐ Das Polster darf JETZT wieder an den Link — der Grund, warum es beim ersten Versuch das Logo zerstoert hat, ist behoben: damals `theme.css .image-wrapper img { height:100% }` + mein `min-height:41px` am Link ⇒ Bild auf 59 px gedehnt heute `S304-FASSUNGA2` setzt am Bild `height:26px; width:auto` Eine feste Bildhoehe kann von der Kastenhoehe nicht mehr gedehnt werden. ⛔ Deshalb steht hier `min-height`, aber am Bild NIE eine zweite Massangabe. **Ein Bild bekommt EINE Massangabe, die andere ist `auto`** — die Regel, an der ich heute zweimal gescheitert bin. ========================================================================= */ html body .header__logo .header__logo__link{ min-height:38px !important; min-width:38px !important; padding:8px 10px !important; box-sizing:content-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } html body .header__logo .header__logo__link img{ height:26px !important; width:auto !important; max-width:none !important; flex:0 0 auto !important; align-self:center !important; } /* === S304-KOPFRUECKEN-2309 · der Inhalt scrollte am Kopf vorbei ========= Mein `::before` mit `z-index:-1` hat nicht gewirkt: es landet hinter seinem eigenen Elternteil, nicht ueber dem Seiteninhalt — die beiden liegen in verschiedenen Stapelkontexten. ⭐ Der Ruecken gehoert an die KOPFGRUPPE, nicht an die Karte: `.shopify-section-group-group-header` ist 402 breit und liegt ueber dem Inhalt. Sie bekommt Weiss, die Karte darin hebt sich durch ihren Schatten ab. So scrollt nichts mehr sichtbar vorbei. ========================================================================= */ html body .shopify-section-group-group-header{ background:#FFFFFF !important; } html body .theme__header::before{ display:none !important; } /* Die Karte muss sich vom weissen Ruecken abheben. */ html body .theme__header{ box-shadow:0 6px 18px -10px rgba(24,24,26,.45), inset 0 0 0 1px rgba(24,24,26,.06) !important; } /* === S304-WKHEBEL-2309 · der Versand-Hebel (Fassung F) ================== Goldrahmen wie im Entwurf, aber mit der Aussage des Ladens statt der Mitgliederwerbung. Er erscheint NUR unterhalb der 80-€-Schwelle und verschwindet, sobald der Gratisversand erreicht ist — ein Hebel, der immer da ist, ist kein Hebel, sondern Tapete. ========================================================================= */ html body .s304-wk-hebel{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; cursor:pointer !important; margin:0 0 10px !important; padding:11px 12px !important; border-radius:12px !important; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#b8860b,#daa520,#ffd700,#daa520,#b8860b) border-box !important; border:1.5px solid transparent !important; } html body .s304-wk-hebel__t{ font-size:12px !important; line-height:1.42 !important; color:#4A443E !important; } html body .s304-wk-hebel__t b{ color:#15130F !important; font-weight:700 !important; } html body .s304-wk-hebel__a{ flex:0 0 auto !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.05em !important; color:#15130F !important; white-space:nowrap !important; border-bottom:1.5px solid #daa520 !important; padding-bottom:2px !important; min-height:32px !important; display:inline-flex !important; align-items:center !important; } /* === S304-EINKNOPF-2309 · die Leiste ruht, wenn der Knopf da ist ======== Sie wird unsichtbar und unantastbar — aber NICHT `display:none`, weil das Theme-JS an ihr haengt (Preis, Varianten, Warenkorb-Anbindung). ⭐ Ein weicher Uebergang, damit es nicht blinkt, wenn man am Knopf vorbeiscrollt. ========================================================================= */ html body .cart-bar.s304-leiste-ruht{ opacity:0 !important; pointer-events:none !important; transform:translateY(8px) !important; } html body .cart-bar{ transition:opacity .18s ease, transform .18s ease !important; } /* === S304-KOPF2-2309 · der Kopf klebt, sein Rücken nicht ================ Enzo: „wenn ich runter scrolle, ist oben der Header so abgeschnitten" und „Burger Menü und dieses Einloggen … ist abgeschnitten". GEMESSEN bei scrollY 500: .theme__header 370×46 @L16 T0→46 position:absolute .shopify-section-group-group-header 402×46 T-468 ← weggescrollt .header__mobile__hamburger T3→67 ← 64 px hoch Konto-Symbol T3→67 ⛔ URSACHE 1: Ich hatte den weissen Ruecken an die GRUPPE gehaengt. Der Kopf klebt aber (per JS), die Gruppe nicht — beim Scrollen ist der Ruecken weg und der Inhalt blitzt links und rechts an der 370-px-Karte vorbei. **Ein Ruecken muss dort haengen, wo das Element wirklich ist.** ⛔ URSACHE 2: Burger und Konto sind 64 px hoch in einem 46-px-Kopf — sie ragen 21 px heraus. Das kommt von MEINEN Tippziel-Regeln (`min-height:38px` + Polster). **Ich habe die Trefferflaeche vergroessert, ohne zu pruefen, ob der Kopf sie ueberhaupt fasst.** ⭐ Loesung ohne Rueckschritt: das Polster wird senkrecht kleiner, die Breite traegt die Trefferflaeche. 44×46 reicht. ⭐ NEUE BAUART: der Kopf selbst ist voll breit und weiss (der Ruecken), die KARTE ist `.header__mobile` darin. Damit klebt beides zusammen. ========================================================================= */ /* Der Kopf: voller weisser Ruecken, keine eigene Karte mehr. */ /* ⛔⛔ KORREKTUR 24.09. — DER RUECKEN WAR WEISS, UND DAS WAR ZWEIMAL FALSCH. Enzo: „der Ausschnitt oben soll den gruenen Hintergrund um die abgerundeten Ecken zeigen" und „beim Scrollen ist da eine weisse Linie unter dem Header". ⭐ BEIDES IST DERSELBE RUECKEN. Er ist voll breit und deckend — richtig, damit beim Kleben nichts links und rechts vorbeiblitzt. Aber er war **weiss**, und die Karte darin ist auch weiss: weiss auf weiss zeigt keine Rundung. Und gegen den Sandgrund steht genau diese weisse Flaeche als Linie unter dem Kopf. ⭐ Der Ruecken muss der GRUND sein, nicht eine Farbe. Dann schwebt die Karte sichtbar darauf und es gibt keine Kante mehr. ⛔ NACHBAR GEPRUEFT: die Glyphen sind ueberall dunkel, weil die KARTE (`.header__mobile`) weiss bleibt — daran aendert sich nichts. */ html body .theme__header{ left:0 !important; right:0 !important; width:100% !important; max-width:none !important; background:#FFFFFF !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; } /* Die Karte wandert nach innen — sie klebt jetzt mit dem Kopf. */ html body .theme__header .header__mobile{ /* 23:35 — Enzo: „2px länger links und rechts, ein bisschen mehr Platz zwischen Ende zum Burger-Menü und Ende zum Card." GEMESSEN vorher: Pille [16, 5, 370, 44], Polster 0 4px, und das **sichtbare** Burger-Symbol (24×24) saß 4 px innerhalb der Kante — bei Radius 22 läuft die Rundung genau dort. Deshalb wirkte es gequetscht, obwohl die Pille breit genug ist. ⛔ Nicht verwechseln: die Tippfläche des Burgers ist 44×44 und ragt bauartbedingt über die Pille hinaus. Das ist richtig so und bleibt — gemessen werden muss das Symbol, nicht der Knopf. */ margin:0 14px !important; border-radius:30px !important; background:#FFFFFF !important; box-shadow:0 6px 18px -10px rgba(24,24,26,.45), inset 0 0 0 1px rgba(24,24,26,.06) !important; padding-left:10px !important; padding-right:10px !important; box-sizing:border-box !important; } /* Tippziele: Breite traegt die Flaeche, nicht die Hoehe. */ html body .header__mobile__hamburger, html body .header__mobile .navlink, html body .header__mobile__right a, html body .header__mobile__right button{ min-width:44px !important; min-height:0 !important; height:44px !important; padding-top:0 !important; padding-bottom:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } html body .header__logo .header__logo__link{ min-height:0 !important; height:44px !important; padding:0 10px !important; } /* === S304-MENUEFUSS-2309 · eine zurueckgenommene Diagnose ================ ⛔⛔ DIESER BLOCK HIESS ZUERST „S304-WEISSE-LINIE" UND BEHAUPTETE, Enzos „beim Warenkorb ganz unten so eine weiße Linie" gefunden zu haben. **Das war falsch, in zwei Stufen — beide selbst gefangen:** 1. Ich meldete `ul.popout-list` (2 × 2 px, weisser Grund, zwei Raender in rgb(247,247,247)) als Verursacher. Dann gemessen, was ich beim ersten Mal nicht mitgemessen hatte: die Liste traegt `opacity: 0` UND `visibility: hidden`. **Sie war nie sichtbar** — also nie eine Linie. ⭐ Lehre: eine Farbmessung ohne Sichtbarkeitsmessung ist keine Aussage. 2. Daraufhin suchte ich erneut und fand „keine hellen Linien". Die Positivkontrolle rettete die Meldung: ich habe eine echte helle Linie in den Fuss eingebaut — **die Suche fand nicht einmal die**. Der Grund: der Behaelter war zu. Und die Elternkette sagt, WELCHER: .drawer__foot → .drawer__inner → HEADER-DRAWER.drawer--header → MOBILE-MENU ⛔ **Das ist das Burger-Menue, nicht der Warenkorb.** Ich habe die ganze Untersuchung am falschen Element gefahren. Der Warenkorb heisst hier `.cart__foot__inner` — das sah ich nur, solange er offen war. ⭐ WAS BLEIBT: die Regeln unten sind harmlos und sinnvoll — der Sprachumschalter im **Menuefuss** bekommt zugeklappt keine sichtbaren Raender. Sie beheben aber NICHT Enzos gemeldete Linie. Die ist weiterhin offen und muss am geoeffneten Warenkorb gemessen werden. ⛔ Die frueher hier stehende Regel `overflow: visible` auf `.popout` ist entfernt: ihre Begruendung („darf nicht herausragen") bewirkte das Gegenteil, und noetig war sie nie — die Eintraege sind `visibility:hidden`. ========================================================================= */ html body .drawer__foot .popout-list, html body .cart__foot .popout-list{ border-top-color:transparent !important; border-bottom-color:transparent !important; border-left-color:transparent !important; border-right-color:transparent !important; } /* Aufgeklappt braucht sie wieder eine Kante — dann ist sie hoch genug, dass eine Haarlinie sie nicht mehr als Strich erscheinen laesst. */ html body .drawer__foot .popout-list.is-visible, html body .drawer__foot .popout-list[style*="opacity: 1"], html body .cart__foot .popout-list.is-visible{ border-color:rgba(0,0,0,.08) !important; box-shadow:0 10px 26px -10px rgba(24,24,26,.32) !important; } /* === S304-KORBLINIE-2309 · der beste Kandidat, ehrlich benannt =========== Enzo: „beim Warenkorb ganz unten darunter … so eine weiße Linie." Am **geoeffneten** Warenkorb gemessen (der vorige Anlauf lief am geschlossenen Burger-Menue — siehe S304-MENUEFUSS-2309), mit Positivkontrolle: eine eingebaute Testlinie wurde gefunden, die Suche taugt also. Ergebnis, neun helle Linien, davon drei ueber 300 px breit: y=374 .ic-cross-sell border-top rgb(236,236,236) y=498 .ic-cross-sell border-bottom rgb(224,224,224) ← dieser y=631 .cart__foot__inner border-top rgb(232,232,232) ⭐ Warum dieser: er sitzt am **unteren** Rand des Empfehlungsblocks, genau dort, wo der Warenkorbinhalt endet — und darunter folgen 47 px Leerraum (`.drawer__foot` hat `margin-top:auto`). Eine Haarlinie, unter der nichts mehr kommt, steht frei im Raum und liest sich als Strich. Die beiden anderen trennen jeweils zwei Bloecke voneinander und tun damit ihre Arbeit — die bleiben. ⛔ EHRLICH: ich kann nicht beweisen, dass Enzo genau diese meint. Er hat sie beschrieben, nicht gezeigt. Das hier ist der begruendete beste Kandidat, kein belegter Treffer. Bleibt die Linie fuer ihn sichtbar, ist die Messliste oben der naechste Ansatzpunkt. ========================================================================= */ html body .drawer--cart .ic-cross-sell{ border-bottom-color:transparent !important; } /* === S304-MENUE-2309 · das Burger-Menue in der Ladensprache ============= Enzo: „aber auch das Burger Menü und so [muss] komplett so passen." ⛔ ES GIBT KEIN ARTEFAKT-BLATT FUERS MENUE. Ich erfinde deshalb keinen neuen Stil, sondern uebertrage die Werte, die im Laden bereits gemessen sind — `.s304-karte` auf der PDP und die Kacheln der Kategorieseite: Karte weiss · r22 · Wurf 0 16px 36px -14px rgba(30,24,18,.44) + 0 3px 8px -2px rgba(30,24,18,.13) Kachel weiss · r18 · derselbe Wurf Rand 16 px Grund #F4F1ED GEMESSEN, was das Menue stattdessen hatte: .menu-304__primary-link background rgb(245,245,245) border-radius 0 · box-shadow none padding 14px 16px · margin 4px 0 · x = 15 Also: graue Kaesten mit scharfen Ecken in einem Laden, in dem alles gerundet ist und einen Wurf traegt. Genau das meinte Enzos „muss passen". ⭐ Der Grund des Blattes wird getoent (#F4F1ED), damit die Kacheln weiss sein koennen — weiss auf weiss traegt nur der Wurf, und das ist auf einer ganzen Menueflaeche zu wenig Halt. So ist es dieselbe Schichtung wie ueberall sonst: getoenter Grund, weisse Karten darauf. ======================================================================== */ html body .drawer--header .drawer__inner, html body mobile-menu .drawer__inner{ background:#FFFFFF !important; } /* ⛔ 23.09.: hier stand `padding: 16px` auf `.menu-304__primary`. Gemessen, was dabei herauskam: die Kachel begann bei **x = 31 statt 16** — der Abstand hat sich ADDIERT, weil `.mobile-menu__block` bereits 15 px traegt. ⭐ Derselbe Fehler wie beim Kaufknopf am 22.09. („margin:16px auf zwei verschachtelten Ebenen"). Ein Rand wird an EINER Stelle gesetzt — und zwar an der, die ihn schon hat. */ html body .mobile-menu__block{ padding-left:16px !important; padding-right:16px !important; } html body .menu-304__primary{ padding-left:0 !important; padding-right:0 !important; } html body .menu-304__primary-link{ background: rgba(255,255,255,.46) !important; border-radius:18px !important; box-shadow:0 16px 36px -14px rgba(24,24,26,.44), 0 3px 8px -2px rgba(24,24,26,.13) !important; margin:4px 0 !important; border:0 !important; -webkit-backdrop-filter:blur(32px) saturate(1.3) !important; backdrop-filter:blur(32px) saturate(1.3) !important; } /* Die Fussleiste (Versand, FAQ, Sprache) bekommt denselben Rand wie oben, damit die Kanten durchlaufen. */ html body .drawer--header .drawer__foot, html body mobile-menu .drawer__foot{ background:#FFFFFF !important; padding-left:16px !important; padding-right:16px !important; } /* === S304-FOOTER-2309 · Punkte 1 und 2 ================================= Enzo: „unten hier beim Impressum, also den Futter da drüber ist es so im Hintergrund grau und dann wieder weiß. Ich will da eigentlich keinen optischen Cut haben." · „du kannst den Futter kleiner gestalten." GEMESSEN, Farbe fuer Farbe von oben nach unten abgelesen: y 60 – 500 weiss (Inhalt) y 555 – 720 schwarz (site-footer-wrapper) y 775 **WEISS WIEDER** ← der Cut Der schwarze Block ist eine eingerueckte Karte (`margin: 0 16px`), also steht auch links und rechts Weiss. Und der `