/* ═══════════════════════════════════════════════════════════════ Bruecke: WooCommerce-, Storefront- und Germanized-Markup, das nicht umgebaut wird, in der Gestalt des Shop-Registers. ─────────────────────────────────────────────────────────────── Grundsatz der Uebergabe (2.1): Markup auf die .sh-Klassen bringen, nicht das Register an das Markup anpassen. Was hier steht, ist der Rest, bei dem sich ein Umbau nicht lohnt oder nicht moeglich ist (Plugin-Ausgaben, WooCommerce-Hinweise, Formularfelder). Kein Radius, kein Schatten - auch hier nicht. Bereichsdateien (wc-produkt.css, wc-korb.css …) haengen dahinter. ═══════════════════════════════════════════════════════════════ */ /* ── Rahmen ─────────────────────────────────────────────────────── */ html { scroll-padding-top: 90px; } body.sh-seite { margin: 0; } .sh-seite #page { overflow-x: clip; } /* Storefronts .col-full ist die Spalte des Registers. */ .sh-seite .col-full { max-width: var(--sh-spalte); margin: 0 auto; padding-left: 16px; padding-right: 16px; } @media (min-width: 768px) { .sh-seite .col-full { padding-left: 32px; padding-right: 32px; } } /* Die Spalte im Inhalt sitzt schon in .col-full - kein zweiter Innenabstand. */ .sh-seite .col-full .sh-spalte { padding-left: 0; padding-right: 0; } /* … ausser in Flaechen, die aus der Spalte auf volle Breite ausbrechen. */ .sh-seite .col-full .sh-vollbreit .sh-spalte { padding-left: 16px; padding-right: 16px; } @media (min-width: 768px) { .sh-seite .col-full .sh-vollbreit .sh-spalte { padding-left: 32px; padding-right: 32px; } } .sh-seite .site-content { padding-bottom: var(--sh-takt); } .sh-seite .content-area, .sh-seite .site-main { width: auto; float: none; margin: 0; } .sh-seite #secondary { display: none; } /* keine Widget-Spalte im System */ .sh-seite .hentry { margin: 0; } /* Grundregeln mit Spezifitaet null (:where): Sie duerfen keine Klasse des Registers ueberstimmen - .sh-aktion-frist etwa setzt margin-top selbst. */ :where(.sh-seite) a { color: inherit; } :where(.sh-seite) img { max-width: 100%; height: auto; } :where(.sh-seite) :is(h1, h2, h3, p) { margin: 0; } .sh-seite .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Sprungmarke: sichtbar, sobald sie den Fokus hat. */ .sh-sprungmarke:focus { position: fixed; left: 16px; top: 16px; z-index: 100; width: auto; height: auto; clip: auto; padding: 12px 16px; background: var(--sh-tat); color: var(--sh-tat-ink); } /* Kopf: Logo im Kopf ist ein Bild, kein Text (Storefront setzte ihn gross). */ .sh-kopf-marke img { height: 24px; width: auto; } .sh-kopf-ziel [hidden] { display: none; } /* Kassenkopf */ .sh-kasse-kopf-rahmen { background: var(--sh-grund); } .sh-kasse-sicher { display: inline-flex; align-items: center; gap: 8px; color: var(--sh-text); } @media (max-width: 599px) { .sh-kasse-sicher { display: none; } } .sh-kasse-fuss { padding-top: 24px; padding-bottom: 32px; border-top: 1px solid var(--sh-linie); } .sh-kasse-fuss span { color: var(--sh-text-2); } /* Fuss */ .sh-fuss-marke { display: block; height: 22px; width: auto; } .sh-fuss-satz { margin-top: 14px; max-width: 28ch; } .sh-fuss-recht a { color: var(--sh-text-2); text-decoration: none; } .sh-fuss-recht a:hover { color: var(--sh-akzent); text-decoration: underline; } .sh-fuss-fussnote { padding-bottom: 28px; max-width: none; } /* Widerrufsschaltflaeche (C17): eigene, abgesetzte Flaeche oben im Fuss (R16, 31.10.2026), in der Kasse unter der Rechtszeile. */ .sh-fuss-widerrufzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding: 16px 20px; background: rgba(255, 255, 255, .07); border-left: 3px solid var(--sh-akzent); } .sh-fuss-widerrufzeile .sh-klein { margin: 0; color: var(--sh-text); } .sh-kasse-fuss .sh-fuss-widerruf { display: flex; width: fit-content; margin-top: 16px; } /* Gesetzliche Gewaehrleistung (R26): das Bild aus dem Amtsblatt, unveraendert, in voller Spaltenbreite. Kein Rahmen, kein Schnitt - nichts daran darf veraendert werden. */ .sh-gewaehrleistung { margin: 24px 0 0; } .sh-gewaehrleistung img { display: block; width: 100%; max-width: 657px; height: auto; } .sh-gewaehrleistung figcaption { margin-top: 6px; } /* Seite /widerruf/ (D9): Felder bis 480 px, auf dem Telefon volle Breite, der Knopf dort ebenfalls. Das Formular kommt aus Germanized. */ .order-withdrawal-request { max-width: 480px; } .order-withdrawal-request .form-row, .order-withdrawal-request .input-text { display: block; width: 100%; } @media (max-width: 599px) { .order-withdrawal-request button[type='submit'] { width: 100%; } } @media (max-width: 599px) { .sh-fuss-widerrufzeile { margin-top: 28px; } .sh-fuss-widerrufzeile .sh-fuss-widerruf { width: 100%; } } /* ── Kachel: das Zweitbild (Marco, 02.10.2026) ─────────────────── Liegt deckungsgleich ueber dem Hauptbild und blendet beim Ueberfahren ein; der Zoom des Registers (scale 1.04) gilt fuer beide. Auf Touch- Geraeten ausgeblendet - ein ausgeblendetes Lazy-Bild laedt nicht. */ .sh-kachel-bild .sh-kachel-zweitbild { position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease, transform .35s ease; } .sh-kachel:hover .sh-kachel-bild .sh-kachel-zweitbild { opacity: 1; } /* Das Hauptbild muss WEICHEN, nicht nur ueberdeckt werden: Die Platte multipliziert jedes Bild (mix-blend-mode: multiply), und ein multipliziertes Bild deckt nie ab - beide schienen durcheinander durch (Marcos Befund vom 05.10.2026, Shirt doppelt). */ .sh-kachel-bild:has(.sh-kachel-zweitbild) > img:not(.sh-kachel-zweitbild) { transition: opacity .25s ease, transform .35s ease; } .sh-kachel:hover .sh-kachel-bild:has(.sh-kachel-zweitbild) > img:not(.sh-kachel-zweitbild) { opacity: 0; } @media (hover: none) { .sh-kachel-bild .sh-kachel-zweitbild { display: none; } } @media (prefers-reduced-motion: reduce) { .sh-kachel-bild .sh-kachel-zweitbild { transition: none; } } /* WooCommerce setzt ul.products als Liste mit Floats. */ .sh-seite ul.products { list-style: none; margin: 0; padding: 0; } .sh-seite ul.products::before, .sh-seite ul.products::after { display: none; } .sh-seite ul.products li.product { width: auto; float: none; margin: 0; padding: 0; text-align: left; } .sh-raster > li[hidden] { display: none; } /* Der Schnellkauf ist ein : dieselbe Gestalt wie der