/* ==========================================================================
Juwelier Rauscher-Hillje – Frontend CSS
--------------------------------------------------------------------------
Struktur / Suchbegriffe:
01 Fonts & Variablen
02 Basislayout & Typografie
03 Header & Navigation
04 Hero / Startseitenkopf
05 Öffnungszeiten-Karte
06 Kacheln / Trust-Band
07 Trauringe / Trauring-Rotator
08 Marken & Inspiration
09 Service-Kacheln
10 Favoritenbereich / Persönlich regional
11 Engagement
12 Unterseiten / Subhero
13 Marken-Lightbox
14 Kontaktseite
15 Footer
16 Go-to-top
17 Responsive Anpassungen
========================================================================== */
/* === 01 Fonts & Variablen ============================================== */
@font-face{font-family:Inter;src:url('/fonts/inter/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter/Inter-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter/Inter-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant/CormorantGaramond-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant/CormorantGaramond-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant/CormorantGaramond-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* === 02 Basislayout & Typografie ======================================= */
:root{--blue:#1a1a1a;--blue-2:#000000;--blue-3:#f0f0f0;--ink:#111315;--text:#4b4f54;--muted:#f6f6f6;--line:#dddddd;--white:#fff;--shadow:0 24px 60px rgba(0,0,0,.12);--radius:24px;--serif:'Cormorant Garamond',Georgia,serif;--sans:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--text);background:#fff;line-height:1.65}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{color:var(--ink);line-height:1.05;margin:0 0 .6em}
h1{font-family:var(--serif);font-size:clamp(2.9rem,6vw,5.6rem);font-weight:600;letter-spacing:-.035em}
h2{font-family:var(--serif);font-size:clamp(2.1rem,4vw,3.8rem);font-weight:600;letter-spacing:-.025em}
h3{font-size:1.12rem}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.narrow{width:min(860px,calc(100% - 40px));margin-inline:auto}
/* === 03 Header & Navigation ============================================ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(15px);border-bottom:1px solid rgba(217,225,235,.78)}
.header-inner{display:flex;align-items:center;gap:24px;min-height:92px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{width:210px;height:auto}
.main-nav{display:flex;gap:6px;margin-left:auto;align-items:center}
.main-nav a{padding:10px 12px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.94rem;color:var(--ink)}
.main-nav a:hover,.main-nav a.active{background:var(--blue-3);color:var(--blue)}
.header-phone{font-weight:700;color:var(--blue);text-decoration:none;white-space:nowrap}
.nav-toggle{display:none;align-items:center;justify-content:center;gap:9px;border:0;background:var(--blue);color:#fff;border-radius:999px;padding:10px 14px;font-weight:700;cursor:pointer}
.burger-icon{display:flex;flex-direction:column;gap:4px;width:22px}
.burger-icon i{display:block;width:22px;height:2px;background:#fff;border-radius:4px}
.nav-toggle em{font-style:normal}
/* === 04 Hero / Startseitenkopf ========================================= */
.hero{position:relative;overflow:hidden;min-height:720px}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center right;transform:scale(1.02)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 43%,rgba(255,255,255,.54) 68%,rgba(0,0,0,.14) 100%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 390px;gap:46px;align-items:center;min-height:720px;padding:70px 0}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--blue);font-weight:800;font-size:.78rem;margin:0 0 18px}
.hero-text{font-size:1.17rem;max-width:650px;color:#3f454a}
.hero-actions,.section-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 22px;border-radius:999px;text-decoration:none;font-weight:800;transition:.2s ease}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.btn-primary:hover{background:var(--blue-2);transform:translateY(-1px)}
.btn-secondary{background:#fff;color:var(--blue);border:1px solid rgba(0,0,0,.28)}
.btn-secondary:hover{border-color:var(--blue);transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--blue);border:1px solid rgba(255,255,255,.35)}
.hero-note,.appointment-line{font-weight:700;color:var(--blue);margin-top:18px}
/* === 05 Öffnungszeiten-Karte =========================================== */
.hours-card{background:rgba(255,255,255,.94);border:1px solid rgba(217,225,235,.92);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.hours-card h2{font-size:2.15rem}
.switch{display:grid;grid-template-columns:1fr 1fr;background:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px;margin-bottom:18px}
.switch span{text-align:center;padding:9px 10px;border-radius:999px;font-weight:800;font-size:.9rem}
.switch .active{background:var(--blue);color:#fff}
.hours-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid rgba(217,225,235,.75)}
.hours-row strong{color:var(--ink);font-size:.95rem;text-align:right}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.quick-actions a{border:1px solid var(--line);text-align:center;padding:11px;border-radius:999px;font-weight:800;text-decoration:none;color:var(--blue)}
.notice-box{padding:14px;border-radius:18px;background:#fff4df;border:1px solid #f3d8a5;margin-bottom:16px}
.notice-box p{margin:.3rem 0 0}
/* === 06 Kacheln / Trust-Band =========================================== */
.trust-band{background:#fff;border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:26px 0}
.trust-grid article,.service-grid article{padding:24px;background:#fff;border:1px solid var(--line);border-radius:22px}
.trust-grid .icon,.service-grid .icon{display:inline-flex;width:42px;height:42px;color:var(--blue);margin-bottom:10px}
.icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.trust-grid h2{font-family:var(--sans);font-size:1.05rem;letter-spacing:0}
.trust-grid p,.service-grid p{margin-bottom:0}
.section{padding:86px 0}
.muted{background:var(--muted)}
.section-head{text-align:center;margin-bottom:34px}
.section-head p:not(.eyebrow){max-width:720px;margin-inline:auto}
.left{text-align:left;margin:0}
/* === 07 Trauringe / Trauring-Rotator =================================== */
.wedding{background:linear-gradient(135deg,#fff 0%,#f4f4f4 100%)}
.wedding-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.wedding-copy,.config-preview,.consultation-card,.action-grid,.about-grid,
/* === 11 Engagement ====================================================== */
.engagement-grid{border:1px solid var(--line);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.wedding-copy{padding:42px}
.config-preview{padding:38px;min-height:360px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(160deg,#fff,#f0f0f0)}
.ring-visual{position:relative;width:240px;height:155px;margin-bottom:22px}
.ring-visual span{position:absolute;border:18px solid rgba(0,0,0,.80);border-radius:50%;width:145px;height:145px;top:5px}
.ring-visual span:first-child{left:20px}
.ring-visual span:nth-child(2){right:18px;border-color:rgba(120,120,120,.72)}
.config-preview strong{font-size:1.35rem;color:var(--ink)}
.config-preview small{color:var(--blue);font-weight:800}
.config-steps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.config-steps span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:.8rem;font-weight:700}
.action-grid{display:grid;grid-template-columns:360px 1fr;gap:32px;padding:24px;align-items:center}
.action-grid img{border-radius:18px;height:260px;width:100%;object-fit:cover}
.lead{font-size:1.13rem;color:var(--ink)}
.carousel-wrap{position:relative}
.card-carousel,.product-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);grid-template-columns:none;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 18px}
.card-carousel::-webkit-scrollbar,.product-carousel::-webkit-scrollbar{display:none}
.brand-card,.product-card{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;min-width:230px;box-shadow:0 10px 28px rgba(0,0,0,.06)}
.brand-card a{text-decoration:none;display:block;padding:22px}
.brand-card img{height:100px;width:100%;object-fit:contain;margin-bottom:18px}
.brand-card h3{margin-bottom:8px}
.brand-card p{font-size:.92rem;margin:0}
.product-card a{display:block;position:relative;text-decoration:none;color:#fff}
.product-card img{height:250px;width:100%;object-fit:cover;background:#ebebeb;transition:transform .25s ease}
.product-card:hover img{transform:scale(1.03)}
.product-more{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(0,0,0,.88);color:#fff;border-radius:999px;padding:9px 12px;font-size:.82rem;font-weight:800;opacity:0;transform:translateY(8px);transition:.2s ease}
.product-card:hover .product-more,.product-card:focus-within .product-more{opacity:1;transform:translateY(0)}
.product-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.carousel-btn{position:absolute;top:42%;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--blue);font-size:2rem;box-shadow:0 12px 26px rgba(0,0,0,.14);cursor:pointer}
.carousel-btn.prev{left:-18px}
.carousel-btn.next{right:-18px}
.swipe-hint{text-align:center;color:var(--blue);font-weight:800;margin:8px 0 0}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-grid.three{grid-template-columns:repeat(3,1fr)}
.engagement{background:#fff}
.engagement-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;padding:34px}
.engagement-head{margin-bottom:30px}
.engagement-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.engagement-cards-wide{grid-template-columns:repeat(3,1fr)}
.engagement-cards article{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--muted)}
.engagement-cards img{height:140px;width:100%;object-fit:cover}
.engagement-cards div{padding:14px}
.engagement-cards h3{margin:0 0 4px}
.engagement-cards p{margin:0}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;padding:26px;align-items:center}
.about-grid>img{height:430px;width:100%;object-fit:cover;border-radius:20px}
/* === 12 Unterseiten / Subhero ========================================== */
.subhero{background:linear-gradient(135deg,#f4f4f4,#fff);padding:86px 0}
.subhero h1{font-size:clamp(2.6rem,5vw,5rem)}
.subhero-grid{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:end}
.subhero-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.configurator-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;min-height:540px}
/* === 13 Marken-Lightbox / Markenunterseite ============================== */
.brand-list{display:grid;gap:20px}
.brand-detail{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.brand-detail img{height:150px;width:100%;object-fit:contain}
.legal{font-size:1.05rem}
/* === 15 Footer ========================================================== */
.site-footer{background:var(--blue-2);color:rgba(255,255,255,.82);padding:64px 0 24px}
.site-footer h3{color:#fff}
.site-footer a{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:30px}
.footer-logo{max-width:210px;background:#fff;border-radius:18px;padding:12px;margin-bottom:14px}
.footer-hours .hours-row{border-bottom:1px solid rgba(255,255,255,.16)}
.footer-hours .hours-row strong{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:36px;padding-top:20px;font-size:.9rem;flex-wrap:wrap}
.site-footer .btn-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.site-footer .btn-light:hover{background:#fff;color:var(--blue)}
.footer-hours .hours-row{gap:8px;padding:5px 0;font-size:.86rem}
.footer-hours .hours-row strong{white-space:nowrap;font-size:.86rem}
/* === 17 Responsive Anpassungen ========================================= */
@media (max-width:980px){.header-inner{min-height:76px}
.brand img{width:176px}
.nav-toggle{display:inline-flex;margin-left:auto}
.header-phone{display:none}
.main-nav{display:none;position:absolute;left:20px;right:20px;top:82px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px;padding:12px;flex-direction:column;align-items:stretch}
.main-nav.open{display:flex}
.main-nav a{padding:14px 16px}
.hero-grid,.wedding-grid,.action-grid,.engagement-grid,.about-grid,.subhero-grid{grid-template-columns:1fr}
.hero{min-height:auto}
.hero-grid{padding:62px 0;min-height:auto}
.hero-overlay{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.86))}
.trust-grid,.service-grid,.service-grid.three,.footer-grid{grid-template-columns:repeat(2,1fr)}
.hours-card{max-width:560px}
.carousel-btn{display:none}
.action-grid img{height:220px}
.engagement-cards{grid-template-columns:1fr 1fr}
.brand-detail{grid-template-columns:1fr}
.footer-bottom{flex-direction:column}
.configurator-box{padding:12px}
}
@media (max-width:640px){.container,.narrow{width:min(100% - 28px,1180px)}
h1{font-size:3rem}
h2{font-size:2.25rem}
.brand img{width:150px}
.nav-toggle em{display:none}
.hero-actions,.section-actions{flex-direction:column}
.btn{width:100%}
.quick-actions{grid-template-columns:1fr}
.trust-grid,.service-grid,.service-grid.three,.footer-grid{grid-template-columns:1fr}
.section{padding:62px 0}
.wedding-copy,.config-preview,.engagement-grid,.about-grid{padding:24px}
.card-carousel,.product-carousel{grid-auto-columns:82%;overflow-x:auto}
.product-card img{height:210px}
.engagement-cards{grid-template-columns:1fr}
.about-grid>img{height:270px}
.site-footer{padding-top:48px}
.subhero{padding:62px 0}
.hours-row{font-size:.92rem}
}
/* V2 Optimierungen */
main p, .legal p, .brand-detail p, .service-grid p, .about-grid p, .wedding-copy p, .engagement p {hyphens:auto;overflow-wrap:break-word;text-align:justify}
.section-head p,.hero-text,.hours-card p,.quick-actions a,.btn,.brand-card p,.footer-grid p,.site-footer p{text-align:inherit}
.hours-status{display:flex;align-items:center;gap:10px;background:var(--blue-3);color:var(--blue);font-weight:800;border-radius:18px;padding:12px 14px;margin:0 0 14px}
.hours-status:before{content:"";width:10px;height:10px;border-radius:50%;background:#24a665;box-shadow:0 0 0 4px rgba(36,166,101,.14)}
.hours-status.is-open:before{background:#24a665;box-shadow:0 0 0 4px rgba(36,166,101,.14)}
.hours-status.is-closed:before{background:#c92a2a;box-shadow:0 0 0 4px rgba(201,42,42,.14)}
.consultation-card{padding:42px;min-height:360px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,#fff,#f0f0f0)}
.consultation-icon{width:82px;height:82px;color:var(--blue);margin-bottom:18px}
.consultation-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.consultation-card h3{font-family:var(--serif);font-size:2.3rem}
.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-weight:800;text-decoration:none;margin-top:10px}
.text-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.configurator-loader{display:flex;align-items:center;justify-content:center;text-align:center}
.configurator-intro{max-width:620px;margin:auto}
.configurator-intro .consultation-icon{margin-inline:auto}
.configurator-intro .btn{margin:8px}
.small-note{font-size:.9rem;color:#73777d;margin-top:18px}
.configurator-target{width:100%;min-height:520px}
.configurator-error{background:#fff4df;border:1px solid #f3d8a5;color:#5f4200;border-radius:18px;padding:14px;margin-top:18px;text-align:center}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.site-footer .footer-grid p{text-align:left}
.brand-card h3,.product-card h3,.service-grid h2,.service-grid h3{hyphens:auto}
.hero-content .btn-primary:after{content:"";width:18px;height:18px;margin-left:8px;background:currentColor;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
.hero-content .btn-secondary:after{content:"";width:18px;height:18px;margin-left:8px;background:currentColor;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
@media (max-width:980px){.burger-icon{width:22px}
.engagement-cards-wide{grid-template-columns:repeat(2,1fr)}
.product-more{opacity:1;transform:none}
.footer-bottom{align-items:flex-start}
.consultation-card{min-height:auto}
.configurator-target{min-height:440px}
}
@media (max-width:640px){main p,.legal p,.brand-detail p,.service-grid p,.about-grid p,.wedding-copy p,.engagement p{text-align:left}
.engagement-cards-wide{grid-template-columns:1fr}
.product-card img{height:220px}
.hours-status{font-size:.95rem}
.footer-hours .hours-row{font-size:.84rem}
.footer-hours .hours-row strong{font-size:.84rem}
}
/* V3 Korrekturen */
.trust-grid article,.service-grid article{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.trust-grid .icon,.service-grid .icon{margin-left:auto;margin-right:auto}
.trust-grid h2,.service-grid h3{text-align:center}
.trust-grid p,.service-grid p{text-align:center}
.wedding-grid{align-items:stretch}
.wedding-copy,.consultation-card{height:100%}
.wedding-copy{display:flex;flex-direction:column;justify-content:center}
.consultation-card{text-align:center;align-items:center}
.consultation-card .text-link{justify-content:center}
.section.about{background:linear-gradient(135deg,#fff 0%,#f4f4f4 100%)}
/* === 14 Kontaktseite ==================================================== */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.contact-card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}
.contact-card .icon{display:inline-flex;width:52px;height:52px;color:var(--blue);margin-bottom:14px}
.contact-card a:not(.btn){color:var(--blue);font-weight:700;text-decoration:none}
.contact-hours .hours-row{font-size:.96rem}
.brand-actions{margin-top:18px}
.brand-examples{display:grid;grid-template-columns:repeat(4,78px);gap:10px;margin-top:18px}
.brand-thumb{appearance:none;border:1px solid var(--line);border-radius:14px;background:#fff;padding:0;overflow:hidden;cursor:pointer}
.brand-thumb img{width:100%;height:72px;object-fit:cover}
.lightbox{display:none;position:fixed;inset:0;z-index:200}
.lightbox.open{display:block}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(17,19,21,.72);backdrop-filter:blur(6px)}
.lightbox-panel{position:relative;width:min(1080px,calc(100% - 32px));max-height:calc(100vh - 48px);overflow:auto;margin:24px auto;background:#fff;border-radius:var(--radius);box-shadow:0 28px 80px rgba(0,0,0,.35);padding:32px}
.lightbox-close{position:sticky;top:0;float:right;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--blue);font-size:2rem;line-height:1;cursor:pointer;z-index:3}
.lightbox-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.lightbox-grid figure{margin:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#f7f9fc}
.lightbox-grid img{width:100%;height:230px;object-fit:cover}
/* === 16 Go-to-top ======================================================= */
.go-top{position:fixed;right:20px;bottom:20px;z-index:120;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:var(--blue);color:#fff;box-shadow:0 16px 34px rgba(0,0,0,.28);font-size:1.4rem;font-weight:800;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s ease}
.go-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.go-top:hover{background:var(--blue-2)}
.configurator-box{overflow:hidden}
.configurator-box #AugustGerstnerManufaktur{width:100%}
.site-footer .footer-bottom a[href="/impressum"],.site-footer .footer-bottom a[href="/datenschutz"]{color:#fff}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr}
.brand-examples{grid-template-columns:repeat(4,1fr)}
.lightbox-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){.trust-grid article,.service-grid article{text-align:center}
.lightbox-panel{padding:22px}
.lightbox-grid{grid-template-columns:1fr}
.lightbox-grid img{height:260px}
.brand-examples{grid-template-columns:repeat(2,1fr)}
.brand-thumb img{height:120px}
.go-top{right:14px;bottom:14px;width:44px;height:44px}
}
/* V4 Bilder & Collagen */
.visual-card,.feature-collage{display:block;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow);border:1px solid var(--line)}
.visual-card img,.feature-collage img,.visit-grid img{display:block;width:100%;height:100%;object-fit:cover}
.visual-card{min-height:320px}
.static-card{pointer-events:auto}
.wedding-grid-visual{grid-template-columns:1.05fr .95fr;align-items:stretch}
.feature-collage-wrap{margin-top:18px;margin-bottom:28px}
.feature-collage{max-width:980px;margin:0 auto}
.feature-collage img{width:100%;height:auto;aspect-ratio:16/9}
/* === 08 Marken & Inspiration =========================================== */
.brand-highlight .section-head,.subhero-visual .section-head{text-align:center}
.about-grid>img,.visit-grid img{height:100%;min-height:360px;border-radius:var(--radius);box-shadow:var(--shadow)}
.visit-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.visit-section{background:#fff}
.contact-visual-section{padding-top:12px}
.top-space{margin-top:6px}
@media (max-width:980px){.wedding-grid-visual,.visit-grid{grid-template-columns:1fr}
.visual-card{min-height:280px}
}
@media (max-width:640px){.feature-collage img{aspect-ratio:4/3}
.about-grid>img,.visit-grid img{min-height:260px}
.visual-card{min-height:240px}
}
/* V5: Cormorant italic accents */
@font-face {
font-family: 'Cormorant Garamond';
src: url('/fonts/cormorant/cormorant-garamond-latin-300-italic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Cormorant Garamond';
src: url('/fonts/cormorant/cormorant-garamond-latin-ext-700-italic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
/* V5: promo tiles, favorite section */
.promo-tile,.promo-band{position:relative;display:block;overflow:hidden;border-radius:var(--radius);min-height:320px;background-size:cover;background-position:center;box-shadow:var(--shadow);border:1px solid var(--line)}
.promo-band{min-height:280px;margin:10px 0 28px}
.promo-tile::before,.promo-band::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(0,0,0,.78), rgba(0,0,0,.18) 60%, rgba(0,0,0,.06));}
.promo-tile-overlay{position:relative;z-index:1;color:#fff;padding:34px;max-width:430px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.promo-tile-overlay .eyebrow,.promo-tile-overlay h3,.promo-tile-overlay p,.promo-tile-overlay .tile-link{color:#fff}
.promo-tile-overlay h3{font-size:2rem;margin-bottom:12px}
.tile-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;margin-top:12px}
.tile-link svg{width:16px;height:16px;stroke:currentColor}
/* === 10 Favoritenbereich / Persönlich regional ========================== */
.about-favorite{padding-top:26px}
.favorite-grid{display:grid;grid-template-columns:1.15fr 1.25fr .95fr;gap:24px;align-items:stretch}
.favorite-image{width:100%;height:100%;min-height:270px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.favorite-copy,.favorite-points{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.favorite-copy{padding:26px 28px}
.favorite-copy h2{margin-top:0}
.favorite-copy p:last-child{margin-bottom:0}
.signature-line{font-family:'Cormorant Garamond', Georgia, serif;font-style:italic;font-weight:300;font-size:1.5rem;color:var(--blue-2);margin-top:12px}
.favorite-points{padding:20px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.point-item{display:flex;gap:14px;align-items:flex-start}
.point-item .icon{flex:none;color:var(--blue)}
.point-item .icon svg{width:22px;height:22px;stroke:currentColor}
.wedding-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:stretch}
.brand-highlight .container:first-of-type{margin-bottom:10px}
@media (max-width:1100px){.favorite-grid{grid-template-columns:1fr 1fr}
.favorite-points{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
.point-item{flex:1 1 220px}
.wedding-grid{grid-template-columns:1fr}
}
@media (max-width:760px){.promo-tile,.promo-band{min-height:260px}
.promo-tile-overlay{padding:24px}
.promo-tile-overlay h3{font-size:1.7rem}
.favorite-grid{grid-template-columns:1fr}
.favorite-points{flex-direction:column}
.signature-line{font-size:1.3rem}
}
/* V6: single-column Trauringe area */
.wedding-single{padding-top:72px}
.wedding-stage{position:relative;display:block;min-height:620px;border-radius:var(--radius);overflow:hidden;background-size:cover;background-position:center center;box-shadow:var(--shadow);border:1px solid var(--line);text-decoration:none}
.wedding-stage::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.88) 34%, rgba(255,255,255,.54) 62%, rgba(0,0,0,.18) 100%)}
.wedding-stage-overlay{position:relative;z-index:1;display:flex;align-items:center;min-height:620px;padding:48px}
.wedding-stage-copy{max-width:560px;background:rgba(255,255,255,.18);backdrop-filter:blur(1px)}
.wedding-stage-copy h2{font-size:clamp(2.6rem,4.8vw,4.4rem)}
.wedding-stage-copy p{font-size:1.05rem;color:#43484d}
.wedding-stage .appointment-line{font-size:1.08rem}
.wedding-stage .btn{pointer-events:none}
.wedding-stage .btn-light{background:rgba(255,255,255,.94);color:var(--blue);border:1px solid rgba(0,0,0,.18)}
@media (max-width:980px){.wedding-stage,.wedding-stage-overlay{min-height:540px}
.wedding-stage-overlay{padding:32px}
.wedding-stage::before{background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.83) 42%, rgba(255,255,255,.38) 100%)}
.wedding-stage-copy{max-width:100%}
}
@media (max-width:640px){.wedding-stage,.wedding-stage-overlay{min-height:500px}
.wedding-stage-copy h2{font-size:clamp(2.2rem,10vw,3.2rem)}
.wedding-stage-overlay{padding:24px}
.wedding-stage .section-actions{gap:10px}
.wedding-stage .btn{width:100%}
}
/* === V10 Startseite: echtes Hero-Bild, Öffnungszeitenstatus, Mobile-Fokus === */
.hero-bg{background-position:center right;}
.hero-overlay{background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.93) 39%,rgba(255,255,255,.58) 64%,rgba(0,0,0,.18) 100%);}
.hours-card h2{margin-bottom:.45em;}
.service-preview .section-head p{max-width:780px;margin-inline:auto;}
@media (max-width:980px){
.hero-bg{background-position:68% center;}
}
@media (max-width:760px){
.hero-bg{background-position:72% center;}
.wedding-stage{background-position:right top;}
}
@media (max-width:540px){
.hero-bg{background-position:78% center;}
.wedding-stage{background-position:76% top;}
}
/* V10.2: Vorteile-Kachel mobil deutlich kompakter
Ziel: Die rechte Kachel im Bereich "Ihr Juwelier in Bremerhaven-Geestemünde"
soll auf Smartphones nicht mehr wie ein großer Block wirken. */
@media (max-width: 760px) {
.about-favorite {
padding-top: 8px;
}
.favorite-grid {
gap: 12px;
}
.favorite-image {
min-height: 220px;
}
.favorite-copy {
padding: 20px 18px;
}
.favorite-points {
padding: 12px 14px;
gap: 0;
box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.point-item {
display: grid;
grid-template-columns: 24px 1fr;
gap: 8px;
padding: 10px 0;
align-items: start;
}
.point-item + .point-item {
border-top: 1px solid rgba(217,225,235,.85);
}
.point-item .icon {
width: 24px;
height: 24px;
margin-top: 1px;
}
.point-item .icon svg {
width: 20px;
height: 20px;
}
.point-item h3 {
font-size: .98rem;
line-height: 1.2;
margin: 0 0 2px;
}
.point-item p {
font-size: .91rem;
line-height: 1.35;
margin: 0;
}
}
@media (max-width: 460px) {
.favorite-image {
min-height: 190px;
}
.favorite-copy {
padding: 18px 16px;
}
.favorite-points {
padding: 8px 12px;
border-radius: 16px;
}
.point-item {
padding: 8px 0;
}
.point-item h3 {
font-size: .94rem;
}
.point-item p {
font-size: .88rem;
}
}
/* V10.3: Mobile Flex-Basis im Favoritenbereich korrigiert
Ursache: Unter 1100px bekamen .point-item eine flex-basis von 220px.
Auf Smartphones blieb diese Basis erhalten und machte die Kachel unnötig hoch. */
@media (max-width: 760px) {
.favorite-points {
justify-content: flex-start;
}
.favorite-points .point-item {
flex: 0 0 auto;
min-height: 0;
}
}
/* V10.8: Gettmann-Konfigurator entkoppelt im iframe */
.configurator-box-safe {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 28px;
}
.configurator-start {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.configurator-start h3 {
font-family: var(--serif);
font-size: clamp(2rem, 3vw, 3rem);
font-weight: 600;
}
.configurator-frame-wrap iframe {
width: 100%;
min-height: 820px;
border: 0;
display: block;
background: #fff;
border-radius: 18px;
}
.configurator-help {
margin: 14px 0 0;
color: var(--text);
font-size: .95rem;
}
@media (max-width: 760px) {
.configurator-box-safe {
padding: 16px;
}
.configurator-frame-wrap iframe {
min-height: 720px;
}
}
/* V11: Trauringe-Seite optimiert ======================================== */
.trauringe-hero-refined .visual-card{min-height:420px}
.trauringe-hero-refined .visual-card img{height:100%;object-fit:cover;object-position:center}
.lead-copy{font-size:1.08rem;color:var(--ink);max-width:62ch}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:18px}
.hero-facts span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:.92rem;font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,.06)}
.hero-facts svg{width:16px;height:16px;stroke:currentColor;fill:none}
.section-tight-top{padding-top:42px}
.process-section .section-head p{max-width:760px}
.process-grid article{text-align:left;align-items:flex-start}
.process-grid h3,.process-grid p{text-align:left}
.process-grid .icon{margin-left:0;margin-right:0}
.ring-advice-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.ring-advice-box img{height:100%;min-height:280px;object-fit:cover;border-radius:18px}
.ring-advice-box > div{padding:8px 4px}
@media (max-width:980px){
.trauringe-hero-refined .visual-card{min-height:340px}
.ring-advice-box{grid-template-columns:1fr}
.ring-advice-box img{min-height:240px}
}
@media (max-width:760px){
.hero-facts{gap:8px}
.hero-facts span{font-size:.86rem;padding:7px 10px}
.section-tight-top{padding-top:22px}
.trauringe-hero-refined .visual-card{min-height:260px}
}
/* V12: Startseite & Marken optimiert ==================================== */
.marken-hero-refined .feature-collage{margin:0}
.compact-head p{max-width:760px;margin-inline:auto}
.brand-intro-grid article{text-align:center}
.brand-intro-grid article .icon,
.brand-intro-grid article h3,
.brand-intro-grid article p{margin-left:auto;margin-right:auto;text-align:center}
.persistent-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.persistent-actions .btn{flex:0 0 auto}
@media (max-width:760px){
.persistent-actions{gap:10px}
}
/* V13: Trauringe-Seite Feinschliff ====================================== */
.hero-background--trauringe{
position:relative;
overflow:hidden;
background:
linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.90) 38%, rgba(255,255,255,.40) 68%, rgba(255,255,255,.12) 100%),
url('/assets/img/site/trauringe-hero-gettmann.png') right center/cover no-repeat;
}
.hero-background--trauringe::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.10));
}
.hero-background-content{
position:relative;
z-index:1;
}
.hero-background-content--single{
min-height:480px;
display:flex;
align-items:center;
}
.hero-copy-box{
max-width:680px;
}
.trauringe-hero-refined .visual-card{display:none}
.wedding-grid-visual .visual-card img{
object-fit:cover;
object-position:center;
}
.ring-advice-image,
.ring-advice-box img{
object-position:right top;
}
@media (max-width:980px){
.hero-background--trauringe{
background:
linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 45%, rgba(255,255,255,.48) 100%),
url('/assets/img/site/trauringe-hero-gettmann.png') center center/cover no-repeat;
}
.hero-background-content--single{min-height:420px}
}
@media (max-width:760px){
.hero-background-content--single{min-height:360px;align-items:flex-end;padding-top:34px;padding-bottom:34px}
.hero-copy-box{max-width:100%}
.wedding-grid-visual .visual-card img{min-height:260px}
}
/* V14: Marken-Seite Hero & Überblick =================================== */
.hero-background--marken{
position:relative;
overflow:hidden;
background:
linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,.55) 64%, rgba(255,255,255,.18) 100%),
url('/assets/img/site/marken-hero-schmuck.png') right center/cover no-repeat;
}
.hero-background--marken::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.08));
}
.brand-intro-grid-four{
grid-template-columns:repeat(4,1fr);
}
.brand-intro-grid-four article{
text-align:center;
}
.brand-intro-grid-four article .icon,
.brand-intro-grid-four article h3,
.brand-intro-grid-four article p{
text-align:center;
margin-left:auto;
margin-right:auto;
}
@media (max-width:1100px){
.brand-intro-grid-four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
.hero-background--marken{
background:
linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.89) 48%, rgba(255,255,255,.50) 100%),
url('/assets/img/site/marken-hero-schmuck.png') center center/cover no-repeat;
}
}
@media (max-width:760px){
.brand-intro-grid-four{grid-template-columns:1fr}
}
/* V15: Schmuck-&-Uhren-Seite ============================================ */
.hero-background--schmuck{
position:relative;
overflow:hidden;
background:
linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,.58) 62%, rgba(255,255,255,.18) 100%),
url('/assets/img/site/schmuck-uhren-hero.png') right center/cover no-repeat;
}
.hero-background--schmuck::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.08));
}
.occasion-grid article,
.reverse-mobile img{
object-fit:cover;
}
@media (max-width:980px){
.hero-background--schmuck{
background:
linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.89) 48%, rgba(255,255,255,.52) 100%),
url('/assets/img/site/schmuck-uhren-hero.png') center center/cover no-repeat;
}
}
@media (max-width:760px){
.reverse-mobile img{order:0}
.reverse-mobile > div{order:1}
}
/* V15.1: Schmuck & Uhren – Bereich Besondere Anlässe ==================== */
.occasion-story-box img{
object-fit: cover;
object-position: center;
}
.service-list.two-columns{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px 24px;
margin:26px 0 10px;
}
.service-list.two-columns > div{
background:rgba(255,255,255,.66);
border:1px solid rgba(0,0,0,.08);
border-radius:16px;
padding:18px 18px 16px;
}
.service-list.two-columns strong{
display:block;
margin:0 0 6px;
color:var(--color-primary);
}
.service-list.two-columns p{
margin:0;
}
.small-icon{
width:24px;
height:24px;
margin-bottom:10px;
}
@media (max-width:760px){
.service-list.two-columns{
grid-template-columns:1fr;
}
}
/* V15.2: Schmuck & Uhren – Besondere Anlässe nur Text, Bild oben rechts === */
.occasion-story-text img {
object-fit: cover;
object-position: right top;
}
.occasion-story-text > div {
padding: 4px 4px 4px 10px;
}
.occasion-story-text .lead {
color: var(--ink);
}
.occasion-story-text p {
max-width: 68ch;
}
@media (max-width: 980px) {
.occasion-story-text img {
min-height: 300px;
object-position: right top;
}
.occasion-story-text > div {
padding: 0;
}
}
@media (max-width: 760px) {
.occasion-story-text img {
min-height: 240px;
object-position: right top;
}
}
/* V16: Kontaktseite & FAQ =============================================== */
.hero-background--kontakt{
position:relative;
overflow:hidden;
background:
linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,.58) 62%, rgba(255,255,255,.16) 100%),
var(--kontakt-hero-image, url('/assets/img/site/geschaeft-aussen-optimiert.png')) right center/cover no-repeat;
}
.hero-background--kontakt::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.08));
}
.faq-list{display:grid;gap:16px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:0 22px}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 36px 22px 0;font-weight:700;color:var(--ink);position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--blue-3);color:var(--blue);font-size:1.2rem;font-weight:700}
.faq-item[open] summary::after{content:'–'}
.faq-answer{padding:0 0 22px}
.faq-answer p{margin:0;max-width:72ch}
@media (max-width:980px){
.hero-background--kontakt{
background:
linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.89) 48%, rgba(255,255,255,.50) 100%),
var(--kontakt-hero-image, url('/assets/img/site/geschaeft-aussen-optimiert.png')) center center/cover no-repeat;
}
}
/* V17: Service-Seite ==================================================== */
.hero-background--service{
position:relative;
overflow:hidden;
background:
linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 35%, rgba(255,255,255,.58) 64%, rgba(255,255,255,.14) 100%),
url('/assets/img/site/service-hero-beratung.png') right center/cover no-repeat;
}
.hero-background--service::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.08));
}
.service-spotlight-box img{
object-position:right center;
}
.service-region-image,
.service-region-box img{
object-position:right top;
}
@media (max-width:980px){
.hero-background--service{
background:
linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.90) 48%, rgba(255,255,255,.54) 100%),
url('/assets/img/site/service-hero-beratung.png') center center/cover no-repeat;
}
}
/* V17.1: Service-Feinschliff ============================================ */
#faq {
scroll-margin-top: 120px;
}
/* V19: finale Änderungswünsche ========================================== */
.brand-card a{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%}
.brand-card h3{text-align:center;width:100%}
.brand-card p{text-align:justify;text-align-last:left;width:100%;hyphens:auto}
.brand-card img{margin-left:auto;margin-right:auto}
.service-grid-two{grid-template-columns:repeat(2,1fr)}
.service-preview-two .service-grid article{text-align:left;align-items:flex-start}
.service-preview-two .service-grid .icon{margin-left:0;margin-right:0}
.service-preview-two .service-grid h3,.service-preview-two .service-grid p{text-align:left}
.brand-detail#eigene-kollektion img{object-fit:contain;height:220px;border-radius:18px;background:#f5f5f5;padding:18px}
.brand-detail .eyebrow{text-transform:none}
@media (max-width:980px){.service-grid-two{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.service-grid-two{grid-template-columns:1fr}.service-preview-two .service-grid article{text-align:left}.service-preview-two .service-grid h3,.service-preview-two .service-grid p{text-align:left}}
/* V19.3: Startseite Marken – finale Zentrierung ========================== */
.brand-highlight .card-carousel .brand-card > a {
text-align: center !important;
align-items: center !important;
}
.brand-highlight .card-carousel .brand-card h3 {
display: block !important;
width: 100% !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.brand-highlight .card-carousel .brand-card p {
display: block !important;
width: 100% !important;
text-align: justify !important;
text-align-last: left;
hyphens: auto;
}
/* V24: Kontakt-Hero-Bild aus Backend ===================================== */
/* Das Bild der Kontakt-Hero-Section wird über --kontakt-hero-image gesetzt. */