/* Kundengalerie — 6 Design-Themes. Aktivierung: Noir = Standard (Variablen in styles.css :root). */ /* ---------- 2 · FINE ART — Elfenbein, Playfair, viel Weißraum ---------- */ [data-theme="fineart"] { --bg: #faf7f0; --bg-soft: #f1ece1; --card: #efe9dd; --line: #ddd4c3; --text: #2b2822; --muted: #8d8474; --gold: #9a7b3f; --gold-soft: #7c6330; --on-accent: #faf7f0; --serif: "Playfair Display", Georgia, serif; --sans: "Inter", system-ui, sans-serif; --display: "Playfair Display", Georgia, serif; --display-style: italic; --display-weight: 500; --gap: 26px; --radius: 0px; } /* ---------- 3 · BREEZE — luftig hell, moderne Sans, Stahlblau ---------- */ [data-theme="breeze"] { --bg: #fbfcfd; --bg-soft: #f1f4f6; --card: #eef1f4; --line: #dde3e8; --text: #232a30; --muted: #7c8892; --gold: #4a7a96; --gold-soft: #3d657d; --on-accent: #fbfcfd; --serif: "Jost", system-ui, sans-serif; --sans: "Jost", system-ui, sans-serif; --display: "Jost", system-ui, sans-serif; --display-style: normal; --display-transform: uppercase; --display-weight: 300; --gap: 18px; --radius: 4px; } [data-theme="breeze"] .hero h1, [data-theme="breeze"] #gate h1 { letter-spacing: .14em; } /* ---------- 4 · BOHO — Sand & Terrakotta, Fraunces, Bogen-Cover ---------- */ [data-theme="boho"] { --bg: #f5eee3; --bg-soft: #eee4d4; --card: #ece0cc; --line: #dccdb4; --text: #3d3227; --muted: #97836b; --gold: #b4643c; --gold-soft: #94502e; --on-accent: #f5eee3; --serif: "Fraunces", Georgia, serif; --sans: "Inter", system-ui, sans-serif; --display: "Fraunces", Georgia, serif; --display-style: normal; --display-weight: 400; --gap: 16px; --radius: 14px; } /* ---------- 5 · ROSÉ — zartes Blush, romantisch ---------- */ [data-theme="rose"] { --bg: #fbf3f1; --bg-soft: #f6e9e6; --card: #f3e3df; --line: #e8d2cc; --text: #43322f; --muted: #a3857e; --gold: #b76e79; --gold-soft: #9c5560; --on-accent: #fbf3f1; --serif: "Cormorant Garamond", Georgia, serif; --sans: "Inter", system-ui, sans-serif; --display: "Cormorant Garamond", Georgia, serif; --display-style: italic; --display-weight: 500; --gap: 20px; --radius: 8px; } /* ---------- 6 · EDITORIAL — Magazin, große Grotesk, Schwarz-Weiß ---------- */ [data-theme="editorial"] { --bg: #ffffff; --bg-soft: #f4f4f4; --card: #efefef; --line: #1a1a1a; --text: #111111; --muted: #6e6e6e; --gold: #111111; --gold-soft: #111111; --on-accent: #ffffff; --serif: "Space Grotesk", system-ui, sans-serif; --sans: "Space Grotesk", system-ui, sans-serif; --display: "Archivo Black", "Space Grotesk", system-ui, sans-serif; --display-style: normal; --display-transform: uppercase; --display-weight: 400; --gap: 10px; --radius: 0px; } [data-theme="editorial"] .hero h1, [data-theme="editorial"] #gate h1 { letter-spacing: .02em; line-height: 1.02; } [data-theme="editorial"] .btn { border-width: 2px; } [data-theme="editorial"] .hairline { background: #111; width: 90px; height: 3px; } /* ============================================================ HERO-VARIANTEN Standard (noir, editorial): Cover fullscreen im Hintergrund. Helle Themes (fineart, breeze, boho, rose): Cover als gerahmtes Bild unter dem Titel („contained"). ============================================================ */ /* Fullscreen-Overlay & Textfarben pro Theme */ .hero { --hero-text: #ece7de; --hero-sub: #d8d2c6; } [data-theme="editorial"] .hero { --hero-text: #ffffff; --hero-sub: #e4e4e4; align-items: flex-start; text-align: left; padding-left: calc(56px + clamp(20px, 6vw, 90px)); padding-right: 20px; } [data-theme="editorial"] .hero .brand { justify-content: flex-start; left: calc(56px + clamp(20px, 6vw, 90px)); right: auto; } [data-theme="editorial"] .hero .welcome { margin-left: 0; padding-left: 0; } [data-theme="editorial"] .hero h1 { padding-left: 0; } [data-theme="editorial"] .hero h1 { font-size: clamp(40px, 9vw, 120px); } [data-theme="editorial"] .hero::before { background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.3) 100%); } /* Contained-Hero für helle Themes */ [data-theme="fineart"] .hero, [data-theme="breeze"] .hero, [data-theme="boho"] .hero, [data-theme="rose"] .hero { --hero-text: var(--text); --hero-sub: var(--muted); height: auto; min-height: 0; padding: 108px 20px 26px; justify-content: flex-start; gap: 0; } [data-theme="fineart"] .hero::before, [data-theme="breeze"] .hero::before, [data-theme="boho"] .hero::before, [data-theme="rose"] .hero::before { display: none; } [data-theme="fineart"] .hero #hero-img, [data-theme="breeze"] .hero #hero-img, [data-theme="boho"] .hero #hero-img, [data-theme="rose"] .hero #hero-img { position: static; width: min(920px, 92vw); height: auto; max-height: 72vh; object-fit: cover; margin-top: 40px; box-shadow: 0 24px 70px rgba(60, 45, 25, .18); } [data-theme="fineart"] .hero h1 { text-shadow: none; } [data-theme="breeze"] .hero h1 { text-shadow: none; } [data-theme="boho"] .hero h1 { text-shadow: none; } [data-theme="rose"] .hero h1 { text-shadow: none; } /* Fine Art: schmaler Rahmen wie ein Passepartout */ [data-theme="fineart"] .hero #hero-img { border: 14px solid #fff; outline: 1px solid var(--line); } /* Breeze: randlos, sehr breit */ [data-theme="breeze"] .hero #hero-img { width: min(1250px, 96vw); border-radius: 6px; box-shadow: 0 18px 50px rgba(35, 55, 70, .14); } /* Boho: Bogenform */ [data-theme="boho"] .hero #hero-img { width: min(560px, 86vw); aspect-ratio: 3 / 4; border-radius: 999px 999px 18px 18px; box-shadow: 0 26px 60px rgba(90, 55, 30, .22); } /* Rosé: sanfte Rundung */ [data-theme="rose"] .hero #hero-img { border-radius: 16px; box-shadow: 0 22px 60px rgba(150, 90, 100, .2); }