/* Schrift wird über im geladen (nicht per @import) — lädt früher/parallel, statt das Rendern der ganzen CSS-Datei zu blockieren, was sonst zu einem Layout-Sprung führen kann, sobald die Schrift nachlädt. */ /* ========================================================================== LAMI — Extra de Parfum · Öffentlicher Auftritt Markenfarben (Kapitel 8.2): Noir · Graphit · Stahl · Nebel · Papier · Weiß Bewusst ohne Akzentfarbe. ========================================================================== */ :root { --noir: #0D0D0D; --graphit: #333333; --stahl: #8A8A8A; --nebel: #E4E4E4; --papier: #F7F7F5; --weiss: #FFFFFF; --bg: var(--weiss); --bg-soft: var(--papier); --ink: var(--noir); --ink-soft: var(--graphit); --ink-faint: var(--stahl); --line: var(--nebel); --ease: cubic-bezier(.22,.61,.36,1); } @media (prefers-color-scheme: dark) { :root { --bg: #0D0D0D; --bg-soft: #161615; --ink: #F7F7F5; --ink-soft: #C9C8C2; --ink-faint: #8A8A8A; --line: #2B2B28; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink-soft); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } * { -webkit-tap-highlight-color: transparent; } .display { font-family: 'Inter', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); margin: 0; } ::selection { background: var(--noir); color: var(--weiss); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } .wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 5vw, 48px); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid transparent; transition: border-color .3s ease, background .3s ease; } .nav.scrolled { border-color: var(--line); } .nav .logo { height: 32px; width: auto; } @media (prefers-color-scheme: dark) { .nav .logo { filter: invert(1); } } .nav-links { display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); } .nav-links a.link { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-soft); transition: color .18s var(--ease); } .nav-links a.link:hover { color: var(--ink); } .btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; padding: 13px 24px; transition: transform .18s var(--ease), background .18s var(--ease); white-space: nowrap; text-decoration: none; font-family: inherit; background: none; color: var(--ink); cursor: pointer; } .btn:active { transform: scale(.96); } .btn-primary { background: var(--ink); color: var(--bg) !important; box-shadow: 0 10px 26px -12px rgba(0,0,0,.35); } .btn-primary:hover { transform: translateY(-2px); } .btn-outline { border: 1.5px solid var(--line); color: var(--ink) !important; } .btn-outline:hover { border-color: var(--ink); } .btn svg { width: 14px; height: 14px; flex-shrink: 0; } /* ---------- Hero ---------- */ .hero { position: relative; padding: clamp(64px, 12vw, 130px) 0 clamp(50px, 8vw, 90px); overflow: hidden; } .hero-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; } .hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(13,13,13,.9) 0%, rgba(13,13,13,.35) 100%); } .hero .wrap { position: relative; z-index: 2; } .hero-content { max-width: 640px; } .hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,.72); font-weight: 700; margin-bottom: 20px; } .hero .eyebrow::before { content: ''; width: 22px; height: 1.5px; background: rgba(255,255,255,.72); } .hero h1 { font-size: clamp(34px, 5.6vw, 58px); line-height: 1.08; margin-bottom: 22px; text-transform: none; letter-spacing: -0.01em; color: #fff; } .hero p.lead { font-size: clamp(15.5px, 2vw, 17.5px); color: rgba(255,255,255,.82); line-height: 1.65; max-width: 480px; margin-bottom: 34px; } .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .hero .btn-primary { padding: 15px 30px; } .hero .btn-outline { border-color: rgba(255,255,255,.4); color: #fff !important; } .hero .btn-outline:hover { border-color: #fff; } .stat-row { display: flex; gap: clamp(28px, 5vw, 56px); margin-top: 56px; flex-wrap: wrap; } .stat b { display: block; font-family: 'Inter', sans-serif; font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; color: var(--ink); } .stat span { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .hero .stat b { color: #fff; } .hero .stat span { color: rgba(255,255,255,.65); } @media (max-width: 767.98px) { .hero { min-height: 100svh; display: flex; align-items: center; padding-top: clamp(96px, 22vw, 130px); } .hero-photo { object-position: center; } .hero-overlay { background: linear-gradient(180deg, rgba(13,13,13,.75) 0%, rgba(13,13,13,.92) 100%); } .hero h1 { font-size: clamp(30px, 9vw, 38px); } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; justify-content: center; } } /* ---------- Flakon-Showcase ---------- Bewusst unabhängig von --bg/--bg-soft: die Bühne ist immer dunkel, damit der fast schwarze Fotohintergrund nahtlos verschmilzt — in beiden Farbschema-Modi identisch. */ .product-highlight { position: relative; background: linear-gradient(180deg, #0d0d0d 0%, #131313 50%, #0d0d0d 100%); } .product-highlight-inner { max-width: 620px; margin: 0 auto; text-align: center; } .product-highlight-inner .kicker { color: rgba(255,255,255,.55); } .product-highlight-inner h2 { color: #fff; } .product-highlight-inner p { max-width: 52ch; margin: 0 auto; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.72); } .product-photo-stage { position: relative; max-width: 900px; margin: clamp(40px, 6vw, 64px) auto 0; } .product-photo-glow { position: absolute; inset: -12%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(196, 122, 46, 0.18) 0%, rgba(196, 122, 46, 0.06) 35%, transparent 70%); } .product-photo { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: saturate(0.92) contrast(1.04); mix-blend-mode: screen; mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 15%, black 80%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 15%, black 80%, transparent 100%); -webkit-mask-composite: source-in; } @media (max-width: 767.98px) { .product-photo-stage { max-width: none; margin-top: 32px; } .product-photo { mix-blend-mode: normal; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 15%, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 15%, black 80%, transparent 100%); } } .product-photo-reveal { transition: opacity .9s ease-out, transform .9s ease-out; } .js .product-photo-reveal { opacity: 0; transform: translateY(24px) scale(1.03); } .product-photo-reveal.in { opacity: 1; transform: none; } /* ---------- Lifestyle (Model) ---------- Wie die Flakon-Bühne bewusst fest dunkel, unabhängig von --bg/--bg-soft. Einheitliche Fläche, keine seitliche Abdunklung — der Übergang zwischen Text und Bild entsteht ausschließlich über die weiche Maske auf dem Foto selbst, nicht über einen zusätzlichen Layer. */ .lifestyle { position: relative; background: #0d0d0d; } .lifestyle-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } .lifestyle-photo { position: relative; } .lifestyle-photo-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 62% 50%, rgba(198, 118, 52, 0.10) 0%, transparent 55%); } .lifestyle-image { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: saturate(0.94) contrast(1.03) drop-shadow(0 24px 60px rgba(0,0,0,.35)); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 88%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 88%, transparent 100%); -webkit-mask-composite: source-in; } .lifestyle-text .kicker { color: rgba(255,255,255,.55); } .lifestyle-text h2 { color: #fff; } .lifestyle-text p { font-size: 15px; line-height: 1.65; margin: 0 0 18px; max-width: 480px; color: rgba(255,255,255,.75); } .lifestyle-text .btn { margin-top: 10px; } .scent-details { display: grid; grid-template-columns: 1fr; gap: 14px 28px; margin: 28px 0 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); max-width: 480px; } .scent-details > div { display: flex; flex-direction: column; gap: 3px; } .scent-details dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 700; } .scent-details dd { margin: 0; font-size: 14px; color: rgba(255,255,255,.88); font-weight: 500; } .lifestyle-text-reveal { transition: opacity .9s ease-out, transform .9s ease-out; } .js .lifestyle-text-reveal { opacity: 0; transform: translateX(-20px); } .lifestyle-text-reveal.in { opacity: 1; transform: none; } .lifestyle-photo-reveal { transition: opacity .9s ease-out .15s, transform .9s ease-out .15s; } .js .lifestyle-photo-reveal { opacity: 0; transform: scale(1.04); } .lifestyle-photo-reveal.in { opacity: 1; transform: none; } @media (min-width: 768px) { .lifestyle-grid { grid-template-columns: 1fr 1fr; gap: 56px; } .lifestyle-photo { order: 2; } .lifestyle-image { mask-image: linear-gradient(to right, transparent 0%, black 22%, black 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 88%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%, black 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 88%, transparent 100%); } .scent-details { grid-template-columns: 1fr 1fr; } } @media (max-width: 767.98px) { .lifestyle-text .btn { width: 100%; justify-content: center; min-height: 44px; } } /* ---------- Reveal ---------- */ .reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal { opacity: 0; transform: translateY(22px); } .reveal.in { opacity: 1; transform: none; } .reveal-stagger.in > * { transition-delay: calc(var(--i, 0) * 70ms); } /* ---------- Section shell ---------- */ .section { padding: clamp(56px, 9vw, 100px) 0; } .section-soft { background: var(--bg-soft); } .section-head { max-width: 580px; margin-bottom: clamp(34px, 5vw, 54px); } .section-head .kicker { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: 12px; display: block; } .section-head h2 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 12px; text-transform: none; letter-spacing: -0.005em; } .section-head p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; } /* ---------- Feature-Karten (echte Kundenstärken, Kapitel 9.3) ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5px; background: var(--line); border: 1.5px solid var(--line); border-radius: 20px; overflow: hidden; } .feature-card { background: var(--bg); padding: 30px 26px; transition: background .2s var(--ease); } .feature-card:hover { background: var(--bg-soft); } .feature-icon { width: 42px; height: 42px; border-radius: 11px; border: 1.5px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .feature-icon svg { width: 20px; height: 20px; } .feature-card h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 8px; color: var(--ink); } .feature-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; } /* ---------- Duftfamilien ---------- */ .family-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 640px) { .family-grid { grid-template-columns: repeat(3, 1fr); } } .family-card { border: 1.5px solid var(--line); border-radius: 18px; padding: 24px 20px; transition: transform .22s var(--ease), border-color .22s var(--ease); } .family-card:hover { transform: translateY(-3px); border-color: var(--ink-faint); } .family-card .ficon { width: 30px; height: 30px; margin-bottom: 16px; color: var(--ink); } .family-card .ficon svg { width: 100%; height: 100%; } .family-card h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15.5px; margin: 0 0 4px; color: var(--ink); text-transform: uppercase; letter-spacing: 0.02em; } .family-card span { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; } /* ---------- Zitat ---------- */ .quote-band { border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); padding: clamp(44px, 7vw, 70px) 0; } .quote-band blockquote { margin: 0; font-size: clamp(20px, 3vw, 28px); line-height: 1.4; color: var(--ink); font-weight: 500; max-width: 760px; } .quote-band cite { display: block; margin-top: 20px; font-size: 12.5px; font-style: normal; color: var(--ink-faint); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } /* ---------- Kontakt ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 36px; } @media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } } .contact-info { display: flex; flex-direction: column; gap: 22px; } .contact-row { display: flex; gap: 16px; align-items: flex-start; } .contact-row .cicon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink); } .contact-row .cicon svg { width: 18px; height: 18px; } .contact-row h4 { margin: 0 0 4px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; } .contact-row p, .contact-row a.plain { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.55; font-weight: 500; } .opening-status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 5px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .status-dot.status-open { background: #3fae64; box-shadow: 0 0 0 3px rgba(63,174,100,.18); } .status-dot.status-closed { background: var(--ink-faint); } .contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .contact-actions .btn { min-width: 180px; min-height: 48px; justify-content: center; } /* ---------- Karte ---------- Kein Container mit eigener Kante mehr — die Maske lässt die Kachel weich in den Section-Hintergrund auslaufen, wie bei den Fotos oben. Das OSM-Attribut liegt bewusst AUSSERHALB von .map-mask (eigenes, ungemasktes Element), damit es lizenzrechtlich immer lesbar bleibt. */ .map-embed { position: relative; min-height: 280px; overflow-anchor: none; cursor: pointer; border-radius: 0; border: none; } .map-embed:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; } .map-embed:hover .map-mask, .map-embed:focus-visible .map-mask { filter: brightness(1.05); } .map-mask { width: 100%; height: 100%; min-height: 280px; background: var(--bg-soft); mask-image: linear-gradient(to right, transparent 0%, black 15%, black 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); -webkit-mask-composite: source-in; } .map-embed #map { width: 100%; height: 100%; min-height: 280px; pointer-events: none; } .map-attribution { position: absolute; top: 10px; right: 12px; z-index: 2; font-size: 10.5px; line-height: 1; color: rgba(20,20,20,.8); background: rgba(247,247,245,.82); backdrop-filter: blur(3px); padding: 4px 8px; border-radius: 999px; pointer-events: none; } .map-attribution a { pointer-events: auto; text-decoration: underline; color: inherit; } @media (prefers-color-scheme: dark) { .map-attribution { color: rgba(247,247,245,.85); background: rgba(13,13,13,.6); } } @media (max-width: 767.98px) { .map-mask { mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%); } .contact-actions { flex-direction: column; } .contact-actions .btn { width: 100%; min-height: 44px; } } /* Schwarz-weiß statt bunter Kacheln — passt sich an Hell/Dunkel an. */ .map-embed .leaflet-tile-pane { filter: grayscale(1) contrast(1.1) brightness(1.04); } @media (prefers-color-scheme: dark) { .map-embed .leaflet-tile-pane { filter: grayscale(1) invert(1) contrast(1.1) brightness(0.95); } } /* ---------- Karten-Marker ---------- */ .lami-marker-wrap { background: none; border: none; } .lami-marker { position: relative; display: block; width: 36px; height: 46px; } .lami-marker-pin { position: relative; z-index: 1; display: block; filter: drop-shadow(0 0 6px rgba(198,118,52,.55)); } .lami-marker-pulse { position: absolute; left: 50%; top: 19px; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; border-radius: 50%; background: rgba(198,118,52,.55); z-index: 0; animation: lami-marker-pulse 2.5s ease-out infinite; } @keyframes lami-marker-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.25); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .lami-marker-pulse { animation: none; opacity: 0; } } /* ---------- Navi-App-Auswahl ---------- */ .nav-sheet-overlay { position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, var(--noir) 45%, transparent); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .22s var(--ease); } .nav-sheet-overlay.open { opacity: 1; pointer-events: auto; } @media (min-width: 640px) { .nav-sheet-overlay { align-items: center; } } .nav-sheet { width: 100%; max-width: 360px; background: var(--bg); border-radius: 20px 20px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -14px 40px -14px rgba(13,13,13,.35); transform: translateY(16px); transition: transform .28s var(--ease); } .nav-sheet-overlay.open .nav-sheet { transform: none; } @media (min-width: 640px) { .nav-sheet { border-radius: 18px; padding: 10px 20px 20px; box-shadow: 0 24px 60px -20px rgba(13,13,13,.4); } } .nav-sheet-title { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); margin: 14px 2px 10px; } .nav-sheet-option { display: flex; align-items: center; justify-content: space-between; padding: 15px 4px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; } .nav-sheet-option svg { width: 16px; height: 16px; color: var(--ink-faint); } .nav-sheet-cancel { width: 100%; margin-top: 14px; border: none; background: var(--bg-soft); border-radius: 999px; padding: 13px; font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; } /* ---------- Footer ---------- */ .footer { padding: 44px clamp(20px, 5vw, 48px) 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 20px; } .footer .logo { height: 22px; width: auto; opacity: .85; } @media (prefers-color-scheme: dark) { .footer .logo { filter: invert(1); } } .footer-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .footer small { color: var(--ink-faint); font-size: 12px; } /* ========================================================================== WordPress-Theme-Chrome (Menü, Admin-Bar, Inhaltsseiten, Formulare) ========================================================================== */ @font-face { font-family: 'Inter'; src: url('../fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } body.admin-bar .nav { top: 32px; } @media (max-width: 782px) { body.admin-bar .nav { top: 46px; } } .nav-links { list-style: none; margin: 0; padding: 0; } .nav-links .current-menu-item > a { color: var(--ink); } .nav-toggle { display: none; } @media (max-width: 700px) { .nav-links { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1.5px solid var(--line); border-radius: 10px; background: none; color: var(--ink); cursor: pointer; } .nav-toggle svg { width: 18px; height: 18px; } .nav.menu-open .nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; padding: 14px clamp(20px, 5vw, 48px) 20px; background: var(--bg); border-bottom: 1px solid var(--line); } .nav.menu-open .nav-links a.link { padding: 10px 0; width: 100%; } } /* ---------- Katalog-Teaser (Startseite -> /katalog/) ---------- */ .katalog-teaser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: clamp(30px, 5vw, 46px); } .katalog-teaser-card { position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); } .katalog-teaser-card img { width: 100%; height: 100%; object-fit: cover; } .katalog-teaser-card .badge { position: absolute; top: 8px; left: 8px; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--noir) 72%, transparent); color: #fff; } /* ---------- Statische Inhaltsseiten (Über uns, Kontakt, Impressum, Datenschutz) ---------- */ .page-hero { padding: clamp(70px, 12vw, 120px) 0 clamp(30px, 5vw, 46px); border-bottom: 1px solid var(--line); } .page-hero h1.display { font-size: clamp(28px, 4.4vw, 44px); text-transform: none; letter-spacing: -0.01em; } .page-hero .kicker { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: 14px; display: block; } .entry-content { padding: clamp(40px, 6vw, 64px) 0 clamp(60px, 8vw, 100px); max-width: 760px; margin: 0 auto; } .entry-content .wrap, .page-content-wrap { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); } .page-content-wrap h2 { font-size: 22px; margin: 40px 0 14px; text-transform: none; letter-spacing: -0.005em; color: var(--ink); font-family: 'Inter', sans-serif; font-weight: 800; } .page-content-wrap h2:first-child { margin-top: 0; } .page-content-wrap h3 { font-size: 16px; margin: 26px 0 10px; color: var(--ink); font-weight: 700; } .page-content-wrap p { font-size: 15px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 16px; } .page-content-wrap ul, .page-content-wrap ol { font-size: 15px; line-height: 1.75; color: var(--ink-soft); padding-left: 22px; margin: 0 0 16px; } .page-content-wrap li { margin-bottom: 6px; } .page-content-wrap a { text-decoration: underline; text-underline-offset: 2px; color: var(--ink); } .page-content-wrap strong { color: var(--ink); } /* ---------- Kontaktformular (Contact Form 7) ---------- */ .wpcf7-form p { margin: 0 0 16px; } .wpcf7-form label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; } .wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel], .wpcf7-form textarea { width: 100%; font-family: inherit; font-size: 15px; color: var(--ink); background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px; transition: border-color .18s var(--ease); } .wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--ink); } .wpcf7-form textarea { min-height: 140px; resize: vertical; } .wpcf7-form input[type=submit] { -webkit-appearance: none; appearance: none; border: none; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; padding: 14px 28px; background: var(--ink); color: var(--bg); cursor: pointer; transition: transform .18s var(--ease); } .wpcf7-form input[type=submit]:hover { transform: translateY(-2px); } .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--line); font-size: 13.5px; } .wpcf7-not-valid-tip { color: #b23b3b; font-size: 12.5px; margin-top: 4px; } .wpcf7-spinner { margin-left: 10px; }