/* ================================================================ schmuck.css – Stylesheet für Schmuck-Einzelseiten Eingebunden von: /cont/schmuck/[sart]/template_schmuck.html und allen daraus abgeleiteten Produktseiten ================================================================ */ /* ---------------------------------------------------------------- 1. GRUNDRESET ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---------------------------------------------------------------- 2. FARB-VARIABLEN (werden per data-seitentyp am gewählt) ---------------------------------------------------------------- */ body[data-seitentyp="black"] { --bg: #000; --fg: #e8e6e0; /* warmes Weiß */ --border: rgba(232, 230, 224, 0.28); --muted: rgba(232, 230, 224, 0.55); } body[data-seitentyp="white"] { --bg: #f9f8f5; --fg: #1a1a1a; --border: rgba(26, 26, 26, 0.22); --muted: rgba(26, 26, 26, 0.55); } /* ---------------------------------------------------------------- 3. BODY – Grundlayout der Seite ---------------------------------------------------------------- */ body { background-color: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.55; padding: 6vh 8vw; padding-bottom: calc(2.5vh + 77px + 1.5em); /* Abstand zum nawi-Anker */ min-height: 100vh; transition: background-color 0.3s, color 0.3s; } /* ---------------------------------------------------------------- 4. SEITEN-CONTAINER ---------------------------------------------------------------- */ .seite { max-width: 520px; } /* ---------------------------------------------------------------- 5. PRODUKTFOTO ---------------------------------------------------------------- */ .foto { display: block; position: relative; /* Anker für Galerie-Buttons */ width: 60vw; max-width: 300px; aspect-ratio: 1 / 1; margin-bottom: 2.5em; text-decoration: none; } .foto img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ---------------------------------------------------------------- 6. BEZEICHNUNG (Headline, h1) ---------------------------------------------------------------- */ .bezeichnung { font-size: 1.4em; font-weight: 500; margin-bottom: 0.3em; padding-left: 21px; } /* ---------------------------------------------------------------- 7. SUBHEADLINE Material, Technik, prägendes Merkmal. Kann mehrere Zeilen lang sein. Visuell zurückgenommen, aber lesbar. ---------------------------------------------------------------- */ .subheadline { font-size: 0.9em; color: var(--muted); margin-bottom: 2.5em; line-height: 1.45; padding-left: 21px; } /* ---------------------------------------------------------------- 8. BESCHREIBUNGSKASTEN ---------------------------------------------------------------- */ .beschreibung { border: 1px solid var(--border); padding: 1.4em; font-size: 0.92em; } .beschreibung p { margin-bottom: 0.9em; } .beschreibung p:last-child { margin-bottom: 0; } .beschreibung a { color: inherit; opacity: 0.8; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: var(--muted); transition: opacity 0.18s; } .beschreibung a:hover { opacity: 0.6; } /* ---------------------------------------------------------------- 9. PREIS ---------------------------------------------------------------- */ .preis { margin-top: 1.4em; text-align: right; font-weight: 500; } .preis a { color: inherit; text-decoration: none; } .preis a:hover { text-decoration: underline; } /* ---------------------------------------------------------------- 10. KONTAKTHINWEIS Dezente Zeile unter dem Preis. ---------------------------------------------------------------- */ .kontakt-hint { margin-top: 0.5em; text-align: right; font-size: 0.85em; color: var(--muted); } .kontakt-hint a { color: var(--muted); text-decoration: none; } .kontakt-hint a:hover { color: var(--fg); text-decoration: underline; } /* ---------------------------------------------------------------- 11. NAWI-ANKER Single Source der Position (fixed, bottom-right / desktop links). z-index 9999: auf keiner Seite ueberdeckbar. ---------------------------------------------------------------- */ .nawi-anker { position: fixed; bottom: 2.5vh; right: 2.5vw; z-index: 9999; display: block; width: 77px; height: 77px; background: url('/img/nawi_2.png') center / contain no-repeat; font-size: 0; /* "Nawi" visuell ausgeblendet, bleibt im DOM */ text-decoration: none; transform-origin: center; transition: transform 140ms ease; } .nawi-anker:hover, .nawi-anker:focus-visible { transform: scale(1.078); } @media (prefers-reduced-motion: reduce) { .nawi-anker, .nawi-anker:hover, .nawi-anker:focus-visible { transition: none; transform: none; } } @media (min-width: 700px) { .nawi-anker { right: auto; left: calc(8vw + 520px + 1.5em); } } /* ---------------------------------------------------------------- 12. FOOTER (Pflichtlinks) ---------------------------------------------------------------- */ .foot-pflicht { margin-top: 4em; padding-top: 0.9em; border-top: 1px solid var(--border); font-size: 0.78em; color: var(--muted); } .foot-pflicht a { color: var(--muted); text-decoration: none; margin-right: 1.2em; } .foot-pflicht a:hover { color: var(--fg); text-decoration: underline; } /* ---------------------------------------------------------------- 13. GALERIE-NAVIGATION (prev / next Buttons am Thumbnail) ---------------------------------------------------------------- */ .foto-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.45); color: #fff; border: none; font-size: 1.4em; line-height: 1; padding: 0.25em 0.4em; cursor: pointer; z-index: 1; opacity: 0.7; transition: opacity 0.15s; } .foto-nav:hover { opacity: 1; } .foto-prev { left: 0; } .foto-next { right: 0; } /* ---------------------------------------------------------------- 14. POPUP (Vollbild-Ansicht bei Klick auf Foto) ---------------------------------------------------------------- */ #foto-popup { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88); z-index: 200; align-items: center; justify-content: center; } #foto-popup.aktiv { display: flex; } .popup-inner { position: relative; max-width: 90vw; max-height: 90vh; border: 2px solid rgba(130, 130, 130, 0.32); } .popup-inner img { display: block; max-width: 100%; max-height: 90vh; object-fit: contain; } /* Minitext-Overlay: halb transparent über dem unteren Bildrand */ .popup-minitext { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.58); color: #e8e6e0; padding: 0.55em 1em; font-size: 0.85em; line-height: 1.4; } .popup-close { position: absolute; top: 0.45em; right: 0.45em; z-index: 1; background: rgba(0, 0, 0, 0.52); border: none; border-radius: 3px; color: #e8e6e0; font-size: 0.9em; line-height: 1; padding: 0.35em 0.5em; cursor: pointer; opacity: 0.78; transition: opacity 0.15s; } .popup-close:hover { opacity: 1; } /* ---------------------------------------------------------------- 15. PREIS-FREIHALTEBEREICH (Nawi-Anker) Auf schmalen Viewports (Nawi fix unten rechts) verschiebt padding-right den Text von .preis und .kontakt-hint aus der Anker-Zone heraus. Nawi-Geometrie: 77 px, Hover bis 83 px, right: 2.5 vw. Formel: 83 px + gap (8 px) - body-right (8 vw) - beschreibung-right (22 px) = 69 px - 5.5 vw. Ab 700 px wechselt der Anker auf die linke Seite des Inhalts; dort kein Konflikt moeglich. ---------------------------------------------------------------- */ @media (max-width: 699px) { .preis, .kontakt-hint { padding-right: calc(69px - 5.5vw); } }