/* ============================================================ wirkaufendeingold.de · home.css Statisches Design-System (Pine + Ivory + Gold) Portiert aus dem React/Tailwind-Entwurf zu semantischem CSS. Fonts werden im via geladen (kein @import hier). ============================================================ */ /* === Design-Tokens ======================================== */ :root { --pine: #0b1712; --pine-2: #0e1d15; --pine-3: #132619; --ivory: #f4f1e8; --ivory-2: #fbf9f2; --ink: #16281e; --gold: #c9a84c; --gold-dark: #a8853a; --gold-bright: #e2c67e; --gold-pale: #f1e4b6; --emerald: #2e7d4f; --emerald-2: #4ea877; --hairline: rgba(244, 241, 232, 0.1); --hairline-dark: rgba(22, 40, 30, 0.12); --ease-out: cubic-bezier(0.33, 0, 0, 1); --maxw: 80rem; --pad-x: 2.5rem; } /* === Reset / Base ========================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--pine); color: var(--ivory); font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4, p, figure, ul { margin: 0; } ul { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } ::selection { background: var(--gold); color: var(--pine); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--pine); } ::-webkit-scrollbar-thumb { background: #24402f; border: 2px solid var(--pine); } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } .skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 100; background: var(--gold-bright); color: var(--pine); padding: .6rem 1rem; font-size: .85rem; font-weight: 600; transition: top .2s var(--ease-out); } .skip-link:focus { top: 1rem; } /* === Utilities ============================================ */ .font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; } .font-mono-data { font-family: 'IBM Plex Mono', ui-monospace, monospace; } .micro-label { font-family: 'IBM Plex Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.6875rem; line-height: 1.4; } .shimmer-gold { background: linear-gradient(105deg, #b08d3e 0%, #e2c67e 55%, #b08d3e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .italic { font-style: italic; } .hairline-t { border-top: 1px solid var(--hairline); } .hairline-b { border-bottom: 1px solid var(--hairline); } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); } .section { position: relative; padding: 5.5rem 0; } .sec-ivory { background: var(--ivory); color: var(--ink); } .sec-pine2 { background: var(--pine-2); } /* Section-Eyebrow (Mikro-Label + kurze Linie) */ .eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; color: var(--gold); } .eyebrow.gd { color: var(--gold-dark); } .eyebrow-line { display: inline-block; width: 2.5rem; height: 1px; background: currentColor; flex: none; } /* Display-Ueberschriften */ .h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: 3.75rem; line-height: 1.05; letter-spacing: -0.02em; } .h2--sm { font-size: 3rem; } .accent-gd { color: var(--gold-dark); } .accent-gb { color: var(--gold-bright); } /* Scroll-Reveal (nur aktiv wenn JS vorhanden: html.js) */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change: opacity, transform; } html.js .reveal.in { opacity: 1; transform: none; } /* === Buttons ============================================== */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; overflow: hidden; padding: 1rem 2rem; font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid transparent; transition: color .3s var(--ease-out); } .btn > span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .5rem; } .btn::before { content: ''; position: absolute; inset: 0; transform: translateY(100%); transition: transform .5s var(--ease-out); } .btn:hover::before { transform: translateY(0); } .btn .arrow { transition: transform .2s var(--ease-out); } .btn:hover .arrow { transform: translateX(4px); } .btn-gold { background: var(--gold-bright); color: var(--pine); } .btn-gold::before { background: var(--ivory); } .btn-outline { border-color: rgba(201, 168, 76, 0.5); color: var(--gold-bright); } .btn-outline::before { background: var(--gold-bright); } .btn-outline:hover { color: var(--pine); } .btn-ghost { border-color: rgba(244, 241, 232, 0.25); color: var(--ivory); } .btn-ghost::before { background: rgba(244, 241, 232, 0.08); } .btn-sm { padding: .55rem 1rem; font-size: .72rem; font-weight: 500; } .btn-lg { padding: 1.05rem 2.1rem; } .btn-block { width: 100%; } /* Outline-Variante auf hellem Grund (Bewertungen) */ .btn-line-gd { border: 1px solid rgba(168,133,58,.5); color: var(--gold-dark); background: transparent; padding: .85rem 1.5rem; font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; transition: background .3s var(--ease-out); } .btn-line-gd:hover { background: rgba(201,168,76,.1); } .btn-line-em { border: 1px solid rgba(46,125,79,.45); color: var(--emerald); background: transparent; padding: .85rem 1.5rem; font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; transition: background .3s var(--ease-out); } .btn-line-em:hover { background: rgba(46,125,79,.08); } /* === Topbar =============================================== */ .topbar { position: relative; z-index: 50; background: var(--pine-2); border-bottom: 1px solid var(--hairline); } .topbar-inner { display: flex; height: 2.25rem; align-items: center; justify-content: space-between; font-size: 11px; } .topbar span { color: rgba(244, 241, 232, 0.55); letter-spacing: .02em; } .topbar .hi { color: var(--gold-bright); } .topbar .stars { color: var(--gold-bright); letter-spacing: .05em; } .topbar-rating { display: flex; align-items: center; gap: .4rem; } .topbar-mid { display: none; } /* === Header =============================================== */ .site-header { position: sticky; top: 0; z-index: 50; /* IMMER deckend. Der Header ist fuer dunklen Grund gestaltet (heller Text, Gold-Akzente). Ohne eigenen Hintergrund verschwand er auf allen Seiten mit hellen Sections und wirkte durchsichtig. */ background: var(--pine); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); } .site-header.scrolled { border-bottom-color: var(--hairline); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); } .header-inner { display: flex; height: 4rem; align-items: center; justify-content: space-between; gap: 1rem; } .brand { line-height: 1.1; } .brand-name { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ivory); } .brand-name .g { color: var(--gold); } .brand-name .de { color: var(--ivory); } .brand-tag { display: block; margin-top: .1rem; color: rgba(244, 241, 232, 0.4); } .nav { display: flex; align-items: center; gap: 1.75rem; } .nav a { position: relative; font-size: 13px; color: rgba(244, 241, 232, 0.7); transition: color .2s var(--ease-out); } .nav a::after { content: ''; position: absolute; left: 0; bottom: -.25rem; height: 1px; width: 0; background: var(--gold); transition: width .3s var(--ease-out); } .nav a:hover { color: var(--ivory); } .nav a:hover::after { width: 100%; } .nav .nav-cta { display: none; } .header-cta { flex: none; } .nav-toggle { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; padding: 8px; background: transparent; border: 1px solid var(--hairline); } .nav-toggle span { display: block; height: 1.5px; width: 100%; background: var(--ivory); transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); } /* === Ticker =============================================== */ .ticker { position: relative; z-index: 40; background: var(--pine-2); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .ticker-inner { display: flex; align-items: center; gap: 1rem; height: 2.75rem; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); } .ticker-status { flex: none; display: inline-flex; align-items: center; gap: .45rem; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .6rem; border: 1px solid var(--hairline); } .ticker-status.live { color: var(--emerald-2); border-color: rgba(78,168,119,.4); } .ticker-status.offline { color: rgba(244,241,232,.5); } .ticker-status.loading { color: rgba(244,241,232,.5); } .ts-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald-2); animation: pulse-dot 1.8s ease-in-out infinite; } .ticker-viewport { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee 45s linear infinite; will-change: transform; } .marquee-track:hover { animation-play-state: paused; } .ticker-item { display: inline-flex; align-items: center; gap: .4rem; padding: 0 1.75rem; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; white-space: nowrap; border-right: 1px solid var(--hairline); } .ticker-item .t-name { color: rgba(244,241,232,.55); } .ticker-item .t-val { color: var(--gold-pale); } .ticker-up { color: var(--emerald-2); } .ticker-down { color: #d98a6a; } .ticker-time { flex: none; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .1em; color: rgba(244,241,232,.4); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* === Hero ================================================= */ .hero { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 100vh; min-height: 100svh; } .hero-light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 78% 22%, rgba(201,168,76,0.09) 0%, transparent 65%), radial-gradient(ellipse 50% 45% at 12% 88%, rgba(46,125,79,0.12) 0%, transparent 65%); } .hero-inner { position: relative; z-index: 10; flex: 1; display: grid; grid-template-columns: 7fr 5fr; align-items: center; gap: 4rem; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 6rem var(--pad-x) 6rem; } .hero-eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; color: var(--gold); } .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald-2); animation: pulse-dot 1.8s ease-in-out infinite; } .hero h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(2.7rem, 6.5vw, 5.6rem); line-height: 1.04; letter-spacing: -0.02em; } .hero h1 .line { display: block; } .hero h1 .muted { color: var(--ivory); } .hero h1 .shimmer-gold { font-weight: 400; font-style: italic; } .hero-lead { margin-top: 2rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.6; color: rgba(244, 241, 232, 0.7); } .hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; } .hero-usps { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: .75rem 2rem; border-top: 1px solid var(--hairline); padding-top: 1.75rem; } .usp { display: inline-flex; align-items: center; gap: .6rem; font-size: .875rem; color: rgba(244, 241, 232, 0.7); } .check-em { color: var(--emerald-2); flex: none; } /* Preis-Medaille */ .medallion { position: relative; margin: 0 auto; aspect-ratio: 1; width: 100%; max-width: 24rem; display: flex; align-items: center; justify-content: center; } .medallion .ring { position: absolute; border-radius: 50%; } .ring-1 { inset: 0; border: 1px solid rgba(201, 168, 76, 0.22); } .ring-2 { inset: 1.5rem; border: 1px solid rgba(244, 241, 232, 0.07); } .ring-3 { inset: 3rem; border: 1px solid rgba(201, 168, 76, 0.12); } .medallion-core { position: relative; width: 60%; height: 60%; border-radius: 50%; border: 1px solid rgba(201, 168, 76, 0.4); background: var(--pine-2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem; } .medallion-lbl { color: rgba(244, 241, 232, 0.45); } .medallion-price { margin-top: .75rem; font-family: 'IBM Plex Mono', monospace; font-size: 2.25rem; color: var(--gold-pale); } .medallion-sub { margin-top: .5rem; font-size: .75rem; color: rgba(244, 241, 232, 0.45); } .medallion-foot { position: absolute; bottom: -2rem; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 232, 0.35); } .hero-metal-fade { opacity: 0 !important; } #hero-metal-lbl, #hero-gold-price, #hero-metal-sub { transition: opacity .36s var(--ease-out); } /* === Ablauf (So funktioniert's) =========================== */ .trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 7rem; border: 1px solid var(--hairline-dark); background: var(--hairline-dark); } .trust-item { display: flex; align-items: center; justify-content: center; gap: .6rem; background: var(--ivory-2); padding: 1.25rem 1rem; } .trust-item span { font-size: .875rem; color: rgba(22, 40, 30, 0.8); } .check-em-d { color: var(--emerald); flex: none; } .sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; } .sec-head-lead { max-width: 24rem; color: rgba(22, 40, 30, 0.62); } .sec-ivory .h2 .muted, .sec-ivory .lead { color: rgba(22, 40, 30, 0.62); } .steps { position: relative; margin-top: 5rem; } .steps-line { position: absolute; left: 0; top: 0; height: 1px; width: 100%; transform-origin: left; background: linear-gradient(90deg, var(--emerald), var(--gold) 60%, var(--gold-bright)); } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .step { position: relative; padding-top: 3rem; } .step-top { display: flex; align-items: flex-start; justify-content: space-between; } .step-icon { color: var(--gold-dark); transition: transform .5s var(--ease-out); } .step:hover .step-icon { transform: translateY(-4px); } .step h3 { margin-top: 2.5rem; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 1.875rem; letter-spacing: -0.01em; } .step p { margin-top: 1rem; font-size: .875rem; line-height: 1.6; color: rgba(22, 40, 30, 0.62); } /* === Ankauf (Was wir kaufen) ============================== */ .ankauf-head { margin-bottom: 4rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; } .ankauf-head .lead { max-width: 24rem; color: rgba(244, 241, 232, 0.6); } .buy-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: rgba(244, 241, 232, 0.08); } .buy-card { position: relative; display: flex; flex-direction: column; min-height: 22rem; grid-column: span 12; background: var(--pine-2); padding: 2.5rem; color: inherit; overflow: hidden; transition: background .5s var(--ease-out); } .buy-card:hover { background: var(--pine-3); } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-7 { grid-column: span 7; } .span-12 { grid-column: span 12; min-height: 17rem; } /* Kategorie-Foto als Kartenhintergrund. Zwei Verlaeufe darueber halten Ueberschrift und Text lesbar: einer von unten, einer von links. */ .buy-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .buy-media picture { display: block; width: 100%; height: 100%; } /* object-position: niedriger X-Wert zeigt den linken Bildausschnitt und schiebt damit das mittig fotografierte Motiv nach rechts, weg vom Text. */ .buy-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 26% center; opacity: .78; transform: scale(1.03); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out); } /* Panorama: Motive liegen im unteren Bilddrittel, daher nach oben ziehen. */ .buy-card.span-12 .buy-media img { object-position: center 88%; } .buy-card.span-12 .buy-media::after { background: linear-gradient(to top, var(--pine-2) 4%, rgba(14, 29, 21, 0.88) 34%, rgba(14, 29, 21, 0.38) 72%, rgba(14, 29, 21, 0.08) 100%), linear-gradient(to right, rgba(14, 29, 21, 0.8) 0%, rgba(14, 29, 21, 0.3) 38%, rgba(14, 29, 21, 0) 68%); } .buy-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--pine-2) 6%, rgba(14, 29, 21, 0.92) 30%, rgba(14, 29, 21, 0.45) 66%, rgba(14, 29, 21, 0.12) 100%), linear-gradient(to right, rgba(14, 29, 21, 0.88) 0%, rgba(14, 29, 21, 0.45) 45%, rgba(14, 29, 21, 0) 85%); } .buy-card:hover .buy-media img { opacity: .92; transform: scale(1.07); } .buy-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: flex-end; } .buy-tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--emerald-2); background: rgba(11, 23, 18, 0.55); border: 1px solid rgba(78, 168, 119, 0.35); padding: .25rem .6rem; white-space: nowrap; } .buy-card h3 { position: relative; z-index: 1; margin-top: auto; padding-top: 3.5rem; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 1.5rem; letter-spacing: -0.01em; } .buy-card p { position: relative; z-index: 1; margin-top: .75rem; margin-bottom: 0; max-width: 28rem; font-size: .875rem; line-height: 1.6; color: rgba(244, 241, 232, 0.62); } .buy-underline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 1px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--emerald), var(--gold)); transition: transform .5s var(--ease-out); } .buy-card:hover .buy-underline { transform: scaleX(1); } /* === Rechner ============================================== */ .calc-grid { margin-top: 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--hairline-dark); background: var(--hairline-dark); } .calc-form { background: var(--ivory-2); padding: 3rem; } .calc-field { margin-bottom: 1.75rem; } .calc-field:last-child { margin-bottom: 0; } .calc-field label { display: block; margin-bottom: .75rem; color: rgba(22, 40, 30, 0.5); } .calc-select-wrap { position: relative; } .calc-select { width: 100%; appearance: none; border: 1px solid rgba(22, 40, 30, 0.2); background: #fff; padding: .875rem 1rem; font-size: .875rem; color: var(--ink); outline: none; transition: border-color .3s var(--ease-out); cursor: pointer; } .calc-select:focus { border-color: var(--gold-dark); } .calc-caret { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--gold-dark); pointer-events: none; } .calc-weight-row { display: flex; align-items: center; gap: 1.25rem; } .calc-num-box { display: flex; align-items: baseline; border: 1px solid rgba(22, 40, 30, 0.2); background: #fff; padding: .625rem .75rem; } .calc-num-box input { width: 4rem; border: none; background: transparent; text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 1.125rem; color: var(--ink); outline: none; -moz-appearance: textfield; } .calc-num-box input::-webkit-outer-spin-button, .calc-num-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .calc-num-box .u { margin-left: .25rem; font-size: .875rem; color: rgba(22, 40, 30, 0.5); } .calc-meta { margin-top: 2.5rem; border-top: 1px solid var(--hairline-dark); padding-top: 1.5rem; display: grid; gap: .75rem; } .calc-meta-row { display: flex; justify-content: space-between; font-size: .875rem; } .calc-meta-row .k { color: rgba(22, 40, 30, 0.55); } .calc-meta-row .v { font-family: 'IBM Plex Mono', monospace; color: var(--gold-dark); } .calc-meta-row .v.em { color: var(--emerald); } .calc-result { position: relative; display: flex; flex-direction: column; justify-content: space-between; background: var(--pine-2); color: var(--ivory); padding: 3rem; } .calc-result .res-lbl { color: rgba(244, 241, 232, 0.45); } .calc-result .res-price { margin-top: 1.5rem; font-family: 'IBM Plex Mono', monospace; font-size: clamp(1.25rem, 3.2vw, 1.8rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--gold-pale); } .calc-result .res-price .crb-sep { margin: 0 .5rem; color: rgba(244, 241, 232, 0.4); } .calc-result .res-note { margin-top: 1rem; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 241, 232, 0.4); } .calc-result .res-cta { margin-top: 2.5rem; } .calc-result .res-call { margin-top: .75rem; } /* Telefonnummer nie mitten in der Nummer umbrechen lassen. */ .calc-result .res-call .nowrap { white-space: nowrap; } .calc-result .res-call > span { flex-wrap: wrap; justify-content: center; text-align: center; } .calc-result .res-fine { margin-top: 1rem; text-align: center; font-size: .75rem; line-height: 1.6; color: rgba(244, 241, 232, 0.5); } .calc-benefits { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } .benefit { display: flex; gap: 1rem; } .benefit svg { color: var(--emerald); flex: none; margin-top: .1rem; } .benefit p { font-size: .875rem; line-height: 1.6; color: rgba(22, 40, 30, 0.65); } .benefit strong { font-weight: 500; color: var(--ink); } /* Range-Slider */ .gold-range { flex: 1; height: 1px; appearance: none; -webkit-appearance: none; background: rgba(22, 40, 30, 0.25); outline: none; } .gold-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 4px solid var(--ivory-2); box-shadow: 0 0 0 1px var(--gold); cursor: pointer; transition: transform .2s var(--ease-out); } .gold-range::-webkit-slider-thumb:hover { transform: scale(1.25); } .gold-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 4px solid var(--ivory-2); box-shadow: 0 0 0 1px var(--gold); cursor: pointer; } /* === Goldbarren =========================================== */ .barren-intro { margin-top: 1.5rem; max-width: 42rem; color: rgba(244, 241, 232, 0.6); } .barren-trust { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: .75rem 2rem; } .barren-trust span { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: rgba(244, 241, 232, 0.7); } .barren-layout { margin-top: 3.5rem; display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; } .bars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(244, 241, 232, 0.08); } .bar-card { position: relative; background: var(--pine-2); padding: 1.5rem; transition: background .5s var(--ease-out); } .bar-card:hover { background: var(--pine-3); } .bar-card .bar-icon { display: flex; justify-content: center; color: var(--gold); transition: color .3s var(--ease-out); } .bar-card:hover .bar-icon { color: var(--gold-bright); } .bar-card .bar-label { margin-top: 1.25rem; font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; letter-spacing: -0.01em; } .bar-card .bar-type { margin-top: .25rem; font-size: .75rem; color: rgba(244, 241, 232, 0.45); } .bar-card .bar-price { margin-top: 1rem; font-family: 'IBM Plex Mono', monospace; font-size: 1.125rem; color: var(--gold-pale); } .bar-add { position: relative; overflow: hidden; margin-top: 1.25rem; width: 100%; border: 1px solid rgba(201, 168, 76, 0.4); background: transparent; padding: .625rem; font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-bright); transition: color .3s var(--ease-out); } .bar-add > span { position: relative; z-index: 1; } .bar-add::before { content: ''; position: absolute; inset: 0; transform: translateY(100%); background: var(--gold-bright); transition: transform .5s var(--ease-out); } .bar-add:hover { color: var(--pine); } .bar-add:hover::before { transform: translateY(0); } .bar-card.flash { animation: barflash .7s var(--ease-out); } @keyframes barflash { 0% { background: rgba(201,168,76,.25); } 100% { background: var(--pine-2); } } .bars-note { margin-top: 1.5rem; font-size: .75rem; line-height: 1.6; color: rgba(244, 241, 232, 0.45); } /* Alle Produkte ausgeblendet */ .bars-empty { grid-column: 1 / -1; padding: 2.5rem 1.5rem; text-align: center; border: 1px dashed var(--hairline); color: rgba(244, 241, 232, 0.55); font-size: .9rem; } /* Eigenes Produktbild aus dem Adminbereich (statt Barren-Symbol) */ .bar-card .bar-photo { display: flex; justify-content: center; align-items: center; height: 3.25rem; } .bar-card .bar-photo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; } /* Hinweisband aus dem Adminbereich (erscheint nur bei gefuelltem Text) */ .site-notice { position: relative; z-index: 49; background: var(--gold-bright); color: var(--pine); text-align: center; padding: .6rem 1.25rem; font-weight: 600; } .cart-panel { position: sticky; top: 7rem; border: 1px solid var(--hairline); background: var(--pine); padding: 1.75rem; } .cart-partner { display: flex; align-items: center; gap: .75rem; border: 1px solid rgba(78, 168, 119, 0.35); background: rgba(46, 125, 79, 0.12); padding: .75rem 1rem; } .cart-partner .pk { font-size: 11px; color: rgba(244, 241, 232, 0.55); } .cart-partner .pv { font-family: 'IBM Plex Mono', monospace; font-size: .875rem; font-weight: 500; letter-spacing: .04em; } .cart-head { margin-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--hairline); padding-bottom: 1rem; } .cart-head h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; letter-spacing: -0.01em; } .cart-count { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--gold-bright); border: 1px solid rgba(201, 168, 76, 0.4); padding: .1rem .6rem; } .cart-list { margin-top: 1rem; min-height: 80px; } .cart-empty { padding: 1.5rem 0; text-align: center; font-size: .875rem; color: rgba(244, 241, 232, 0.45); } .cart-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid rgba(244, 241, 232, 0.06); padding: .75rem 0; } .cart-item .ci-name { font-size: .875rem; } .cart-item .ci-price { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: rgba(244, 241, 232, 0.45); } .cart-qty { display: flex; align-items: center; gap: .5rem; } .cart-qty button { width: 1.5rem; height: 1.5rem; border: 1px solid rgba(244, 241, 232, 0.2); background: transparent; font-size: .75rem; color: rgba(244, 241, 232, 0.7); transition: border-color .2s, color .2s; } .cart-qty button:hover { border-color: var(--gold); color: var(--gold-bright); } .cart-qty .q { font-family: 'IBM Plex Mono', monospace; width: 1.5rem; text-align: center; font-size: .875rem; } .cart-summary { margin-top: 1rem; border-top: 1px solid var(--hairline); padding-top: 1rem; display: grid; gap: .4rem; } .cart-sub-row { display: flex; justify-content: space-between; font-size: .875rem; } .cart-sub-row .k { color: rgba(244, 241, 232, 0.55); } .cart-sub-row .v { font-family: 'IBM Plex Mono', monospace; color: var(--gold-pale); } .cart-ship { font-size: 11px; color: rgba(244, 241, 232, 0.4); } .cart-benefits { margin-top: 1.5rem; display: grid; gap: .625rem; } .cart-benefits li { display: flex; align-items: flex-start; gap: .625rem; font-size: .75rem; line-height: 1.6; color: rgba(244, 241, 232, 0.55); } .cart-benefits li svg { color: var(--emerald-2); flex: none; margin-top: .15rem; } .barren-disclaimer { margin-top: 3.5rem; max-width: 56rem; font-size: .75rem; line-height: 1.6; color: rgba(244, 241, 232, 0.4); } .barren-disclaimer strong { color: rgba(244, 241, 232, 0.6); font-weight: 500; } /* === Bewertungen ========================================== */ .testi-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; } .testi-rating { display: flex; align-items: center; gap: .75rem; } .testi-rating .score { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: 3rem; color: var(--ink); } .testi-rating .stars { letter-spacing: .15em; color: var(--gold); } .testi-rating .sub { margin-top: .25rem; font-size: .75rem; color: rgba(22, 40, 30, 0.55); } .testi-carousel { position: relative; margin-top: 4rem; } .testi-track { display: flex; gap: 1px; overflow-x: auto; border: 1px solid var(--hairline-dark); background: var(--hairline-dark); scroll-snap-type: x mandatory; scrollbar-width: none; } .testi-track::-webkit-scrollbar { display: none; } .testi-card { flex: 0 0 380px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; background: var(--ivory-2); padding: 2.25rem; } .testi-card .stars { font-size: .875rem; letter-spacing: .2em; color: var(--gold); } .testi-card .quote { margin-top: 1.5rem; font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: 1.125rem; line-height: 1.65; color: rgba(22, 40, 30, 0.85); } .testi-foot { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; border-top: 1px solid rgba(22, 40, 30, 0.1); padding-top: 1.5rem; } .testi-ava { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(46, 125, 79, 0.4); background: rgba(46, 125, 79, 0.1); font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--emerald); flex: none; } .testi-foot .n { font-size: .875rem; font-weight: 500; color: var(--ink); } .testi-foot .m { font-size: .75rem; color: rgba(22, 40, 30, 0.5); } .testi-controls { margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; } .testi-hint { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(22, 40, 30, 0.4); } .testi-arrows { display: flex; gap: .5rem; } .testi-arrows button { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(22, 40, 30, 0.25); background: transparent; color: rgba(22, 40, 30, 0.7); font-size: 1.1rem; transition: border-color .3s, color .3s; } .testi-arrows button:hover:not(:disabled) { border-color: var(--gold-dark); color: var(--gold-dark); } .testi-arrows button:disabled { opacity: .35; cursor: not-allowed; } .testi-review-cta { margin-top: 3.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; border: 1px solid var(--hairline-dark); background: var(--ivory-2); padding: 2rem; text-align: center; } .testi-review-cta p { font-size: .875rem; color: rgba(22, 40, 30, 0.65); } .testi-review-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; } .testi-review-btns a { display: inline-flex; align-items: center; gap: .55rem; } .rev-ico { width: 12px; height: 12px; flex: none; display: block; } /* === FAQ ================================================== */ .faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 3.5rem; } .faq-intro .lead { margin-top: 1.5rem; font-size: .875rem; line-height: 1.6; color: rgba(244, 241, 232, 0.55); } .faq-intro a { color: var(--gold-bright); text-decoration: underline; text-decoration-color: rgba(201, 168, 76, 0.4); text-underline-offset: 4px; } .faq-item { border-bottom: 1px solid var(--hairline); } .faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; background: transparent; border: none; text-align: left; color: inherit; } .faq-q-label { display: flex; align-items: baseline; gap: 1.25rem; } .faq-q-text { font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; color: var(--ivory); transition: color .3s var(--ease-out); } .faq-item.open .faq-q-text, .faq-q:hover .faq-q-text { color: var(--gold-pale); } .faq-plus { position: relative; width: 1rem; height: 1rem; flex: none; transition: transform .3s var(--ease-out); } .faq-item.open .faq-plus { transform: rotate(45deg); } .faq-plus::before, .faq-plus::after { content: ''; position: absolute; background: var(--gold-bright); } .faq-plus::before { left: 0; top: 50%; height: 1px; width: 100%; transform: translateY(-50%); } .faq-plus::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-out); } .faq-item.open .faq-a { grid-template-rows: 1fr; } .faq-a-inner { overflow: hidden; } .faq-a p { max-width: 42rem; padding: 0 2.5rem 1.75rem; font-size: .875rem; line-height: 1.6; color: rgba(244, 241, 232, 0.6); } /* === Kontakt ============================================== */ .kontakt-grid { margin-top: 4rem; display: grid; grid-template-columns: 5fr 7fr; gap: 3.5rem; } .kontakt-phone { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 2.25rem; letter-spacing: -0.01em; color: var(--gold-pale); transition: color .2s; } .kontakt-phone:hover { color: var(--gold-bright); } .kontakt-phone-sub { margin-top: .5rem; font-size: .75rem; color: rgba(244, 241, 232, 0.45); } .kontakt-blocks { margin-top: 3rem; display: grid; gap: 2rem; } .kontakt-block { border-left: 1px solid rgba(201, 168, 76, 0.35); padding-left: 1.25rem; } .kontakt-block .kb-t { color: var(--emerald-2); } .kontakt-block .kb-d { margin-top: .5rem; font-size: .875rem; line-height: 1.6; color: rgba(244, 241, 232, 0.6); } .kontakt-block a.kb-d { color: var(--gold-bright); text-decoration: underline; text-decoration-color: rgba(201, 168, 76, 0.4); text-underline-offset: 4px; display: inline-block; } .kontakt-badges { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: .5rem; } .kontakt-badges span { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(244, 241, 232, 0.5); border: 1px solid rgba(244, 241, 232, 0.15); padding: .35rem .75rem; } .form-card { position: relative; border: 1px solid rgba(244, 241, 232, 0.12); background: var(--pine); padding: 2.5rem; } .form-card h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: 1.5rem; letter-spacing: -0.01em; } .form-row { margin-top: 1.25rem; } .form-grid-2 { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .form-grid-2 .form-row { margin-top: 0; } .field-label { display: block; margin-bottom: .625rem; color: rgba(244, 241, 232, 0.45); } .field { width: 100%; border: 1px solid rgba(244, 241, 232, 0.18); background: var(--pine); padding: .875rem 1rem; font-size: .875rem; color: var(--ivory); outline: none; transition: border-color .3s var(--ease-out); } .field::placeholder { color: rgba(244, 241, 232, 0.3); } .field:focus { border-color: var(--gold); } textarea.field { resize: none; } .select-wrap { position: relative; } .select-wrap select { appearance: none; cursor: pointer; } .select-caret { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--gold); pointer-events: none; } .consent { margin-top: 1.5rem; display: flex; align-items: flex-start; gap: .75rem; font-size: .75rem; line-height: 1.6; color: rgba(244, 241, 232, 0.55); cursor: pointer; } .consent input { margin-top: .15rem; width: 1rem; height: 1rem; flex: none; appearance: none; border: 1px solid rgba(244, 241, 232, 0.3); background: transparent; cursor: pointer; transition: background .2s, border-color .2s; position: relative; } .consent input:checked { border-color: var(--gold); background: var(--gold); } .consent input:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--pine); border-width: 0 2px 2px 0; transform: rotate(45deg); } .consent a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; } .form-social { margin-top: 1.5rem; display: grid; gap: .35rem; font-size: .75rem; } .form-social .fs-1 { font-weight: 500; color: var(--emerald-2); } .form-social .fs-1 .stars { letter-spacing: .15em; color: var(--gold-bright); } .form-social .fs-2 { color: rgba(244, 241, 232, 0.45); } .form-submit { margin-top: 2rem; } .form-fine { margin-top: .75rem; text-align: center; font-size: 11px; color: rgba(244, 241, 232, 0.4); } .form-success { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 420px; } .form-success .fs-check { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid rgba(78, 168, 119, 0.5); background: rgba(46, 125, 79, 0.15); } .form-success h3 { margin-top: 2rem; font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: 1.875rem; letter-spacing: -0.01em; } .form-success p { margin-top: 1rem; max-width: 24rem; font-size: .875rem; line-height: 1.6; color: rgba(244, 241, 232, 0.6); } /* === CTA-Banner =========================================== */ .cta-banner { position: relative; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--pine-2); padding: 6rem 0; text-align: center; } .cta-banner::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(201, 168, 76, 0.08), transparent 70%); } .cta-inner { position: relative; max-width: 42rem; margin: 0 auto; } .cta-banner h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; } .cta-banner p { margin-top: 1.25rem; font-size: 1.05rem; line-height: 1.6; color: rgba(244, 241, 232, 0.65); } .cta-row { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } /* === Footer =============================================== */ .site-footer { background: var(--pine); border-top: 1px solid var(--hairline); padding: 5rem 0 2.5rem; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2.5rem; } .footer-brand .brand-name { font-size: 1.125rem; } .footer-brand p { margin-top: 1rem; max-width: 22rem; font-size: .875rem; line-height: 1.6; color: rgba(244, 241, 232, 0.55); } .footer-address { margin-top: 1rem; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.7; color: rgba(244, 241, 232, 0.5); } .footer-badges { margin-top: 1.25rem; display: flex; gap: .5rem; } .footer-badge { display: inline-flex; align-items: center; gap: .4rem; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(244, 241, 232, 0.5); border: 1px solid var(--hairline); padding: .3rem .6rem; } .footer-col h4 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); margin-bottom: 1.25rem; } .footer-col a { display: block; padding: .35rem 0; font-size: .875rem; color: rgba(244, 241, 232, 0.6); transition: color .2s; } .footer-col a:hover { color: var(--gold-bright); } .footer-bottom { margin-top: 4rem; border-top: 1px solid var(--hairline); padding-top: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .8rem; color: rgba(244, 241, 232, 0.45); } .footer-bottom .fb-links { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer-bottom a:hover { color: var(--gold-bright); } .ico { width: 1em; height: 1em; } /* ============================================================ RESPONSIVE · <= 860px und <= 600px ============================================================ */ @media (max-width: 860px) { :root { --pad-x: 1.5rem; } .section { padding: 6rem 0; } .h2 { font-size: 2.6rem; } .h2--sm { font-size: 2.3rem; } /* Header: Nav zu Hamburger */ .nav-toggle { display: flex; } .header-cta { display: none; } .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: rgba(11, 23, 18, 0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); padding: .5rem var(--pad-x) 1.25rem; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height .35s var(--ease-out), opacity .25s var(--ease-out); } .nav.open { max-height: 26rem; opacity: 1; pointer-events: auto; } .nav a { padding: .85rem 0; font-size: .95rem; border-bottom: 1px solid var(--hairline); } .nav a::after { display: none; } .nav .nav-cta { display: block; margin-top: 1rem; text-align: center; border: 1px solid rgba(201,168,76,.5); color: var(--gold-bright); padding: .85rem; border-bottom: 1px solid rgba(201,168,76,.5); } /* Topbar: Mitte ausblenden */ .topbar-inner { font-size: 10.5px; } /* Hero */ .hero { min-height: auto; } .hero-inner { grid-template-columns: 1fr; gap: 3rem; padding: 4.5rem var(--pad-x) 4rem; } .hero-media { display: none; } .hero-usps { justify-content: center; } /* Ablauf */ .trust-bar { grid-template-columns: repeat(2, 1fr); margin-bottom: 4.5rem; } .steps-line { display: none; } .steps-grid { grid-template-columns: 1fr; gap: 0; } .step { border-top: 1px solid rgba(22, 40, 30, 0.15); padding-top: 2rem; margin-top: 2rem; } .step:first-child { margin-top: 0; } /* Ankauf: alle Karten volle Breite */ .buy-grid { grid-template-columns: 1fr; } .span-4, .span-5, .span-7, .span-12 { grid-column: span 1; } .buy-card, .buy-card.span-12 { padding: 2rem; min-height: 18rem; } /* Rechner */ .calc-grid { grid-template-columns: 1fr; } .calc-form, .calc-result { padding: 2rem; } .calc-benefits { grid-template-columns: 1fr; gap: 1.5rem; } /* Goldbarren */ .barren-layout { grid-template-columns: 1fr; } .bars-grid { grid-template-columns: repeat(2, 1fr); } .cart-panel { position: static; } /* FAQ + Kontakt */ .faq-grid { grid-template-columns: 1fr; gap: 2.5rem; } .faq-a p { padding-left: 0; padding-right: 1rem; } .kontakt-grid { grid-template-columns: 1fr; gap: 3rem; } .form-card { padding: 2rem; } /* Footer */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 600px) { :root { --pad-x: 1.25rem; } .section { padding: 4.5rem 0; } .h2 { font-size: 2.15rem; } .h2--sm { font-size: 2rem; } .topbar-hotline { max-width: 60%; } .hero h1 { font-size: clamp(2.4rem, 10vw, 3rem); } .hero-actions .btn { flex: 1 1 100%; } .trust-bar { grid-template-columns: 1fr; } .form-grid-2 { grid-template-columns: 1fr; gap: 1.25rem; } .bars-grid { grid-template-columns: 1fr 1fr; } .testi-card { flex-basis: 82vw; padding: 1.75rem; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } .cta-row .btn { flex: 1 1 100%; } /* Nachlass-Karte: hier greift der enge Hochformat-Ausschnitt (nachlass-mobil.webp). Verlauf schwaecher und Bild heller, damit Pokal und Taschenuhr nicht im dunklen Fuss der Karte verschwinden. */ .buy-card.span-12 .buy-media img { opacity: .9; object-position: center center; } .buy-card.span-12 .buy-media::after { background: linear-gradient(to top, var(--pine-2) 3%, rgba(14, 29, 21, 0.9) 26%, rgba(14, 29, 21, 0.3) 58%, rgba(14, 29, 21, 0) 100%), linear-gradient(to right, rgba(14, 29, 21, 0.6) 0%, rgba(14, 29, 21, 0.18) 45%, rgba(14, 29, 21, 0) 75%); } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } html.js .reveal { opacity: 1; transform: none; transition: none; } .marquee-track { animation: none; } .ts-dot, .hero-eyebrow .dot { animation: none; } .btn::before, .bar-add::before { transition: none; } #hero-metal-lbl, #hero-gold-price, #hero-metal-sub { transition: none; } .buy-media img { transition: none; transform: none; } .buy-card:hover .buy-media img { transform: none; } }