/* ============================================================ It's Wedding — Luxury Wedding Landing Ported from the Claude Design source "Luxury Wedding Landing.dc.html". ============================================================ */ /* ---------- tokens ---------- */ :root { --bg: #fafaf8; --ink: #0a0a0a; --ink-85: rgba(10, 10, 10, 0.85); --ink-78: rgba(10, 10, 10, 0.78); --ink-72: rgba(10, 10, 10, 0.72); --ink-70: rgba(10, 10, 10, 0.70); --ink-65: rgba(10, 10, 10, 0.65); --ink-55: rgba(10, 10, 10, 0.55); --ink-50: rgba(10, 10, 10, 0.50); --ink-45: rgba(10, 10, 10, 0.45); --ink-40: rgba(10, 10, 10, 0.40); --ink-20: rgba(10, 10, 10, 0.20); --ink-15: rgba(10, 10, 10, 0.15); --light: #fafaf8; --light-75: rgba(250, 250, 248, 0.75); --light-55: rgba(250, 250, 248, 0.55); --dark: #0a0a0a; --dark-soft: #1a1a1a; --stone: #e7e2d8; --accent: #c9a27e; --font-display: 'Bodoni Moda', serif; --font-serif: 'Cormorant Garamond', serif; --font-body: Georgia, 'Times New Roman', serif; --font-sans: 'Inter', sans-serif; --gutter: 48px; } /* Atmosphere presets — mirrors the `mood` prop of the design source. Switch by setting data-mood on . */ [data-mood="cinematic"] { --hero-overlay: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.7)); --hero-filter: none; --nav-tracking: 0.16em; } [data-mood="airy"] { --hero-overlay: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.12) 55%, rgba(0,0,0,0.28)); --hero-filter: brightness(1.08) saturate(0.9); --nav-tracking: 0.12em; } [data-mood="noir"] { --hero-overlay: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.68) 45%, rgba(0,0,0,0.88)); --hero-filter: grayscale(0.55) contrast(1.15); --nav-tracking: 0.24em; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } h1, h2, h3, p, blockquote, figure, fieldset, legend { margin: 0; padding: 0; } ul { margin: 0; padding: 0; list-style: none; } fieldset { border: 0; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--light); padding: 12px 20px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; } .skip-link:focus { left: 8px; top: 8px; } /* ============================================================ NAV ============================================================ */ .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; } .nav__menu { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(10px, 1.8vw, 30px); padding: 24px; } .nav__link { font-family: var(--font-sans); font-size: 10.5px; letter-spacing: var(--nav-tracking); text-transform: uppercase; text-decoration: none; white-space: nowrap; color: rgba(255, 255, 255, 0.85); transition: color 300ms ease; padding-bottom: 3px; border-bottom: 1px solid transparent; } .nav__link:hover { color: var(--accent); } .nav__link.is-active { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); } .nav__link--button { color: #fff; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.8); transition: background 300ms ease, color 300ms ease; } .nav__link--button:hover { background: #fff; color: var(--ink); } .nav__logo { flex-shrink: 0; margin: 0 clamp(4px, 1vw, 18px); line-height: 0; } .nav__logo img { height: clamp(38px, 4vw, 56px); width: auto; filter: brightness(0) invert(1); } .nav__toggle { display: none; position: absolute; top: 26px; right: 20px; z-index: 2; width: 34px; height: 26px; padding: 0; background: transparent; border: 0; cursor: pointer; } .nav__toggle-bar { display: block; width: 100%; height: 1px; background: #fff; transition: transform 300ms ease, opacity 200ms ease; } .nav__toggle-bar + .nav__toggle-bar { margin-top: 8px; } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:first-child { transform: translateY(4.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:last-child { transform: translateY(-4.5px) rotate(-45deg); } /* ============================================================ SHARED TYPE ============================================================ */ .display { font-family: var(--font-display); font-weight: 400; color: var(--ink); } .display--md { font-size: clamp(28px, 3vw, 44px); line-height: 1.12; text-transform: uppercase; } .display--lg { font-size: clamp(32px, 5vw, 60px); line-height: 1.1; } .caps-title { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); line-height: 1.05; font-size: clamp(28px, 4vw, 54px); } .caps-title--wide { letter-spacing: 0.16em; font-size: clamp(34px, 5vw, 62px); line-height: 1; } .caps-title--md { font-size: clamp(26px, 3.4vw, 46px); letter-spacing: 0.14em; } .caps-title--sm { font-size: clamp(22px, 2.6vw, 34px); letter-spacing: 0.1em; } .caps-title--light { color: var(--light); } .caps-title--center { text-align: center; } .caps-sub { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); line-height: 1.1; font-size: 19px; } .caps-sub--lg { font-size: 24px; letter-spacing: 0.14em; } .eyebrow { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-50); } .eyebrow--sans { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.3em; color: var(--ink-45); } .eyebrow--light { color: var(--light-55); letter-spacing: 0.28em; } .eyebrow--center { text-align: center; } .prose { font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: var(--ink-70); } .prose--lg { font-size: 17px; line-height: 1.8; } .prose--sm { font-size: 15.5px; } .prose--serif { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.8; color: var(--ink-72); } .prose--justify { text-align: justify; hyphens: auto; font-size: 17.5px; line-height: 1.85; color: var(--ink-78); } .prose--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 52ch; } .prose--measure { max-width: 54ch; } .prose--light { color: var(--light-75); } .lede-italic { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2.4vw, 28px); line-height: 1.5; color: var(--ink-75, rgba(10,10,10,0.75)); } .closing-italic { margin-top: 130px; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2.4vw, 30px); color: var(--ink-70); } .closing-caps { margin-top: 150px; text-align: center; font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-72); line-height: 1.02; font-size: clamp(20px, 2.8vw, 38px); } .signature { margin-top: 40px; font-family: var(--font-serif); font-style: italic; font-size: 20px; color: rgba(10, 10, 10, 0.75); } .stack { display: flex; flex-direction: column; gap: 22px; } .stack--left { text-align: left; gap: 24px; } .spacer { height: 160px; } /* ---------- buttons ---------- */ .btn { display: inline-block; font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; padding: 15px 36px; border: 1px solid transparent; cursor: pointer; transition: background 300ms ease, color 300ms ease; } .btn--lg { font-size: 12px; padding: 16px 44px; } .btn--solid { background: var(--ink); color: var(--light); border-color: var(--ink); } .btn--solid:hover { background: var(--bg); color: var(--ink); } .btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--outline:hover { background: var(--ink); color: var(--light); } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.8); } .btn--ghost-light:hover { background: #fff; color: var(--ink); } .center-row { display: flex; justify-content: center; padding: 64px 0 160px; } .center-row--tall { padding: 120px 0 160px; } .center-row--gap { gap: 20px; flex-wrap: wrap; } /* ============================================================ IMAGE SLOTS ============================================================ */ .slot { position: relative; overflow: hidden; background: var(--stone); margin: 0; } .slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .slot.is-bw img { filter: grayscale(1); } .slot.is-empty { background-image: repeating-linear-gradient( 135deg, #ddd7cb, #ddd7cb 26px, #d2cabb 26px, #d2cabb 52px ); } .slot.is-empty::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10, 10, 10, 0.35); } /* Full-bleed background slots sit behind headlines — their placeholder label would collide with the copy, so only the texture shows. */ .subhero__bg.is-empty::after, .feature__bg.is-empty::after, .kform-section__bg.is-empty::after, .testimonial__bg.is-empty::after { content: none; } .slot--portrait, .slot--34 { aspect-ratio: 3/4; } .slot--45 { aspect-ratio: 4/5; } .slot--43 { aspect-ratio: 4/3; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; height: 100vh; width: 100%; overflow: hidden; background: var(--dark); } .hero__media { position: absolute; inset: 0; overflow: hidden; filter: var(--hero-filter); } .hero__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1400ms ease-in-out; will-change: opacity; } .hero__slide.is-active { opacity: 1; pointer-events: auto; } .hero__slide img { width: 100%; height: 100%; object-fit: cover; } .hero__overlay { position: absolute; inset: 0; background: var(--hero-overlay); pointer-events: none; } /* fades the hero out into the page background as it scrolls away */ .hero__fade { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 50ms linear; } .hero__dots { position: absolute; left: 24px; bottom: 24px; z-index: 5; display: flex; gap: 8px; opacity: 0; transition: opacity 300ms ease; } .hero:hover .hero__dots, .hero__dots:focus-within { opacity: 1; } .hero__dot { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(0, 0, 0, 0.28); color: rgba(255, 255, 255, 0.9); font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.04em; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 300ms ease, color 300ms ease, border-color 300ms ease; } .hero__dot:hover { border-color: #fff; } .hero__dot[aria-selected="true"] { background: rgba(255, 255, 255, 0.92); color: #111; } .hero__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 0 24px clamp(116px, 11vh, 150px); pointer-events: none; } .hero__title { pointer-events: auto; font-family: var(--font-serif); font-weight: 400; font-size: clamp(20px, min(4.2vw, 6vh), 58px); line-height: 0.92; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4); animation: heroFadeIn 900ms ease-out both; animation-delay: 250ms; } .hero__title-main { display: block; font-style: italic; text-transform: uppercase; } .hero__title-sub { display: block; font-style: normal; font-weight: 400; font-size: 22px; letter-spacing: 0.05em; margin-top: 0.4em; } .hero__cta { pointer-events: auto; margin-top: 24px; flex-shrink: 0; animation: heroFadeIn 900ms ease-out both; animation-delay: 400ms; } .hero__scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 2; } .hero__scroll-line { display: block; width: 1px; height: 48px; background: rgba(255, 255, 255, 0.7); animation: scrollPulse 2.4s ease-in-out infinite; } @keyframes heroFadeIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } } /* ============================================================ MANIFEST ============================================================ */ .section { background: var(--bg); } .manifest { padding: 64px var(--gutter) 0; } .manifest__grid { display: grid; grid-template-columns: 0.85fr 1.3fr 0.85fr; gap: 48px; align-items: start; max-width: 1700px; margin: 0 auto; } .manifest__col { display: flex; flex-direction: column; gap: 40px; } .manifest__col--center { padding-top: 24px; } .manifest__col:last-child { gap: 32px; } .manifest__hi { font-family: var(--font-serif); font-weight: 500; font-size: 17px; color: var(--ink); } .manifest__hi + .prose { margin-top: 16px; } .manifest__headline + .prose { margin-top: 28px; } .manifest__headline + .prose { max-width: 52ch; font-size: 16.5px; } .eyebrow + .btn { margin-top: 20px; } .carousel { position: relative; aspect-ratio: 4/5; overflow: hidden; } .carousel__item { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; } /* Bilder im Wechsler bleiben in Originalfarben. */ .carousel__item.is-active { opacity: 1; } /* ---------- contact-sheet filmstrip ---------- */ .filmstrip { margin-top: 96px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 140px; scrollbar-width: none; } .filmstrip::-webkit-scrollbar { display: none; } .filmstrip__frame { scroll-snap-align: start; flex: 0 0 clamp(140px, 13vw, 220px); aspect-ratio: 3/4; } /* ============================================================ REAL WEDDING FEATURE ============================================================ */ .feature { position: relative; width: 100%; height: 82vh; min-height: 480px; overflow: hidden; background: var(--dark); display: flex; align-items: center; justify-content: center; } .feature__bg { position: absolute; inset: 0; } .feature__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.55)); pointer-events: none; } .feature__content { position: relative; z-index: 1; text-align: center; padding: 48px 24px; } .feature__kicker { font-family: var(--font-serif); font-style: italic; font-size: clamp(16px, 2vw, 22px); color: rgba(255, 255, 255, 0.85); margin-bottom: 10px; } .feature__place { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 6vw, 84px); line-height: 0.95; color: #fff; margin-bottom: 32px; } /* ============================================================ DESTINATIONS ============================================================ */ .destinations { padding: 160px var(--gutter) 0; } .destinations__intro { max-width: 920px; margin: 0 auto; text-align: center; } .destinations__intro .prose { margin-top: 28px; font-size: 17px; } .destinations__image { margin-top: 72px; height: 64vh; min-height: 380px; } .rule-band { padding: 56px 0; border-top: 1px solid var(--ink-15); border-bottom: 1px solid var(--ink-15); text-align: center; font-family: var(--font-serif); letter-spacing: 0.22em; text-transform: uppercase; font-size: clamp(14px, 2vw, 20px); color: var(--ink-65); } /* ============================================================ PORTFOLIO ============================================================ */ .portfolio { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; } .portfolio__tile { aspect-ratio: 16/9; border: 1px solid var(--bg); } /* ============================================================ TESTIMONIALS ============================================================ */ .testimonials { padding: 160px 0 0; } .testimonials__title { text-align: center; padding: 0 24px 96px; } .testimonial { position: relative; width: 100%; min-height: 56vh; display: flex; align-items: flex-end; background: var(--dark-soft); overflow: hidden; } .testimonial__bg { position: absolute; inset: 0; } .testimonial__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); pointer-events: none; } .testimonial__body { position: relative; z-index: 1; padding: 64px; max-width: 640px; } .testimonial__quote { font-family: var(--font-body); font-style: italic; font-size: clamp(19px, 2.4vw, 28px); line-height: 1.6; color: #fff; } .testimonial__name { margin-top: 28px; font-family: var(--font-serif); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); } /* ============================================================ ABOUT ============================================================ */ .about { padding: 160px var(--gutter) 0; } .about__intro { max-width: 820px; margin: 0 auto; text-align: center; } .about__intro .prose { margin-top: 24px; font-size: 18px; } .about__portrait { margin-top: 72px; height: 80vh; min-height: 460px; background: var(--dark-soft); } .about__text { max-width: 760px; margin: 0 auto; padding: 64px 0 160px; display: flex; flex-direction: column; gap: 28px; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--bg); padding: 140px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .footer__tagline { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 3.4vw, 38px); color: var(--ink-85); } .footer__based { margin-top: 14px; font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-45); } .footer__social { margin-top: 32px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink-40); display: flex; align-items: center; justify-content: center; text-decoration: none; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.05em; color: var(--ink-60, rgba(10,10,10,0.6)); transition: border-color 300ms ease, color 300ms ease; } .footer__social:hover { border-color: var(--ink); color: var(--ink); } /* Instagram-Zeichen im Kreis. Ohne feste Grösse würde das SVG den Kreis sprengen — es bringt selbst keine mit. */ .footer__social svg { width: 18px; height: 18px; display: block; } /* Anschrift über der Impressum-Zeile — auf allen Seiten gleich. */ .footer__adresse { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-55); margin: 40px 0 0; } .footer__cta-title { margin-top: 80px; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5vw, 52px); line-height: 1.15; max-width: 16ch; color: var(--ink); } .footer__cta-title + .prose { margin-top: 24px; max-width: 48ch; line-height: 1.7; } .footer .btn--solid { margin-top: 36px; } .footer__nav { margin-top: 96px; width: 100%; max-width: 920px; padding-top: 32px; border-top: 1px solid var(--ink-15); display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; } .footer__nav a { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--ink); transition: color 300ms ease; } .footer__nav a:hover { color: var(--accent); } .footer__legal { margin-top: 32px; padding-bottom: 40px; display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; font-family: var(--font-sans); font-size: 11px; color: var(--ink-40); } .footer__legal a { color: var(--ink-40); text-decoration: none; transition: color 300ms ease; } .footer__legal a:hover { color: var(--ink); } /* ============================================================ SUB-PAGE HERO ============================================================ */ .subhero { position: relative; height: 56vh; min-height: 380px; background: var(--dark); overflow: hidden; } .subhero--tall { height: 78vh; min-height: 460px; } .subhero--short { height: 48vh; min-height: 320px; } .subhero__bg { position: absolute; inset: 0; } .subhero__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.6)); pointer-events: none; } .subhero--tall .subhero__scrim { background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.65)); } .subhero__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px 0; pointer-events: none; } .subhero__content--bottom { justify-content: flex-end; padding: 0 24px 72px; } .subhero__kicker { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); } .subhero__content--bottom .subhero__kicker { font-family: var(--font-sans); font-size: 11px; } .subhero__title { margin-top: 16px; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5vw, 62px); line-height: 1.05; color: #fff; } .subhero__title--xl { margin-top: 18px; font-size: clamp(34px, 6vw, 78px); line-height: 1; } /* ---------- page wrappers ---------- */ .wrap { padding: 110px var(--gutter) 0; margin: 0 auto; max-width: 1400px; } .wrap--wide { max-width: 1500px; padding: 96px 6vw 0; } .wrap--mid { max-width: 1300px; padding: 120px 6vw 0; } /* ============================================================ FOTOREPORTAGEN ============================================================ */ .stories { margin-top: 80px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 56px 40px; } .story-card { text-decoration: none; color: inherit; display: block; } .story-card__cover { aspect-ratio: 3/4; } .story-card__title { margin-top: 18px; font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--ink); } .story-card__meta { margin-top: 6px; display: flex; gap: 12px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); } /* ============================================================ REPORTAGE DETAIL ============================================================ */ .story__lede { max-width: 56ch; font-size: 18px; line-height: 1.85; color: var(--ink-72); } .story__grid { margin-top: 96px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .story__frame { aspect-ratio: 3/2; } .story__frame--wide { grid-column: span 2; } .pullquote { margin: 110px auto 0; max-width: 44ch; text-align: center; } .pullquote blockquote { margin: 0; } .pullquote p { font-family: var(--font-body); font-style: italic; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.6; color: var(--ink); } .pullquote figcaption { margin-top: 22px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-50); } /* ============================================================ WIR ============================================================ */ .wir__intro { text-align: center; max-width: 52ch; margin: 0 auto; } .wir__intro .caps-title { margin-top: 24px; } .wir__intro .lede-italic { margin-top: 32px; } .wir__team { margin-top: 96px; aspect-ratio: 16/10; } .two-col { margin-top: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 64px; align-items: start; } .two-col--gap { margin-top: 64px; gap: 56px 80px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .two-col .stack { gap: 20px; } .two-col .prose { font-size: 16.5px; line-height: 1.85; color: var(--ink-72); } .services { margin-top: 130px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; padding: 64px 0; border-top: 1px solid var(--ink-15); border-bottom: 1px solid var(--ink-15); } .services--plain { border: 0; padding: 0; margin-top: 110px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .services--rules { margin-top: 140px; max-width: 1100px; margin-left: auto; margin-right: auto; gap: 48px; padding: 56px 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .services h3 + .prose, .services .eyebrow + .prose { margin-top: 14px; } .wir__portraits { margin-top: 130px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .wir__portraits .slot { aspect-ratio: 3/4; } /* ============================================================ CONTENT CREATION ============================================================ */ .content__intro { max-width: 56ch; margin: 0 auto; text-align: center; } .content__intro .prose { margin-top: 28px; } .reels { margin-top: 88px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .reels .slot { aspect-ratio: 9/16; } .content__wide { margin-top: 96px; aspect-ratio: 16/9; } /* ============================================================ BRIDAL STYLING ============================================================ */ .bridal__statement { margin-top: 120px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 64px; align-items: end; } .statement { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.08; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-72); padding-bottom: 8px; } .statement--sm { font-size: clamp(24px, 2.8vw, 40px); line-height: 1.12; letter-spacing: 0.02em; padding-bottom: 0; } .bridal__veil { margin-top: 140px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px; align-items: center; } .bridal__pair { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; } .block-head { margin-top: 150px; } .block-head .caps-title { margin-top: 18px; } .packages { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; } .package { display: flex; flex-direction: column; padding: 44px 36px; border: 1px solid var(--ink-15); background: var(--bg); } .package .prose { margin-top: 16px; } .package__list { margin-top: 28px; display: flex; flex-direction: column; gap: 11px; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.6; color: var(--ink-70); } .package__price { margin-top: auto; padding-top: 36px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-50); } .package__price--light { color: var(--light-55); } .destination-block { margin-top: 28px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: stretch; } .destination-block__text { padding: 56px 48px; background: var(--dark); color: var(--light); display: flex; flex-direction: column; } .destination-block__text .caps-title { margin-top: 18px; } .destination-block__text .prose { margin-top: 24px; max-width: 52ch; } .destination-block__image { min-height: 420px; } .steps { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; } .steps__num { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--ink-20); } .steps h3 { margin-top: 20px; } .steps .prose { margin-top: 14px; } .voices { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px; } .voices blockquote { margin: 0; } .voices p { font-family: var(--font-body); font-style: italic; font-size: 17px; line-height: 1.75; color: var(--ink-78); } .voices figcaption { margin-top: 20px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-50); } .gallery { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .cta-panel { margin-top: 150px; padding: 96px 48px; background: var(--dark); color: var(--light); text-align: center; } .cta-panel .caps-title { margin-top: 20px; } .cta-panel .prose { margin-top: 22px; max-width: 46ch; margin-left: auto; margin-right: auto; } .cta-panel .btn { margin-top: 40px; } /* ---------- FAQ ---------- */ .faq { margin-top: 40px; max-width: 900px; } .faq--center { margin: 56px auto 0; } .faq details { border-bottom: 1px solid var(--ink-15); } .faq summary { list-style: none; cursor: pointer; padding: 26px 0; font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); line-height: 1.05; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 24px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-family: var(--font-sans); font-size: 18px; color: var(--ink-45); transition: transform 250ms ease; flex-shrink: 0; } .faq details[open] summary::after { transform: rotate(45deg); } .faq__body { padding: 0 0 26px; max-width: 64ch; font-family: var(--font-body); font-size: 16.5px; line-height: 1.85; color: var(--ink-72); } .faq--center .faq__body { font-family: var(--font-body); } /* ============================================================ KONTAKT ============================================================ */ .kontakt__hero-type { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); line-height: 0.98; font-size: clamp(32px, 7vw, 96px); text-align: center; } .kontakt__hero-type em { font-style: italic; text-transform: none; letter-spacing: 0.01em; color: rgba(10, 10, 10, 0.75); } .kontakt__editorial { margin-top: 80px; aspect-ratio: 16/9; } .kontakt__letter { margin: 96px auto 0; max-width: 58ch; text-align: center; } .kontakt__letter .stack { margin-top: 36px; } .kontakt__letter .prose { line-height: 1.9; } .kontakt__address { margin-top: 44px; display: flex; flex-direction: column; gap: 18px; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60, rgba(10,10,10,0.6)); font-style: normal; } .kontakt__address a { color: inherit; text-decoration: none; } .kontakt__address a:hover { color: var(--accent); } /* ---------- Anfrageformular (Kontakt) ---------- */ .kontakt__details-block { margin-top: 130px; text-align: center; } .kontakt__details-block .kontakt__address { align-items: center; } .kform-section { position: relative; margin-top: 120px; padding: clamp(64px, 8vw, 130px) var(--gutter); background: var(--dark); overflow: hidden; } .kform-section__bg { position: absolute; inset: 0; } .kform-section__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.6)); pointer-events: none; } .kform-wrap { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; } .kform-title { margin-bottom: clamp(36px, 5vw, 64px); font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4vw, 52px); line-height: 1.1; color: #fff; text-align: center; } .kform { display: flex; flex-direction: column; gap: 26px; } .kfield { display: flex; flex-direction: column; gap: 10px; } .kfield > label, .kfield__label { font-family: var(--font-sans); font-size: 13px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); } .kreq { color: #e5533d; } .kfield input, .kfield textarea, .kfield select, .kselect__button { width: 100%; border: 1px solid transparent; border-radius: 0; background: rgba(228, 228, 226, 0.82); padding: 15px 16px; font-family: var(--font-sans); font-size: 15px; color: var(--ink); outline: none; transition: background 200ms ease, border-color 200ms ease; } .kfield textarea { min-height: 150px; resize: vertical; } .kfield input:focus, .kfield textarea:focus, .kfield select:focus, .kselect__button:focus-visible { background: rgba(240, 240, 238, 0.95); border-color: #fff; } .kfield input[aria-invalid="true"], .kfield textarea[aria-invalid="true"], .kfield select[aria-invalid="true"], .kselect.is-invalid .kselect__button { border-color: #e5533d; } /* native date + select chrome */ .kfield input[type="date"] { position: relative; } .kfield input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.65; } .kfield select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 14px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px; } /* ---------- Mehrfachauswahl-Dropdown ---------- */ .kselect { position: relative; } .kselect__button { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; } .kselect__value { color: rgba(10, 10, 10, 0.55); } .kselect.has-value .kselect__value { color: var(--ink); } .kselect__caret { flex-shrink: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--ink); transition: transform 200ms ease; } .kselect.is-open .kselect__caret { transform: rotate(180deg); } .kselect__menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; background: #f2f2f0; border: 1px solid rgba(10, 10, 10, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); padding: 6px; } .kselect__option { display: flex; align-items: center; gap: 12px; padding: 12px 12px; cursor: pointer; font-family: var(--font-sans); font-size: 15px; color: var(--ink); } .kselect__option:hover { background: rgba(10, 10, 10, 0.06); } .kselect__option input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; } /* ---------- consent, button, status ---------- */ .kconsent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-family: var(--font-sans); font-size: 13px; line-height: 1.65; color: rgba(255, 255, 255, 0.85); } .kconsent input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: #fff; cursor: pointer; } .kconsent a { color: #fff; } .kconsent.is-invalid { color: #f0a89c; } .kform__required { font-family: var(--font-sans); font-size: 12px; color: rgba(255, 255, 255, 0.6); } .kbtn { align-self: flex-start; margin-top: 6px; padding: 17px 48px; background: #fff; border: 1px solid #fff; font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: background 300ms ease, color 300ms ease; } .kbtn:hover { background: transparent; color: #fff; } .kbtn[disabled] { opacity: 0.6; cursor: default; } .kerror, .kform__status { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: #f0a89c; } .kform__status:empty { display: none; } .kform__status[data-state="pending"] { color: rgba(255, 255, 255, 0.75); } /* ---------- Danke-Ansicht ---------- */ .kform-done { text-align: center; padding: clamp(32px, 6vw, 72px) 0; } .kform-done__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.15; color: #fff; } .kform-done__text { margin-top: 18px; font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2.2vw, 24px); color: rgba(255, 255, 255, 0.85); } .kform-done__note { margin-top: 28px; font-family: var(--font-sans); font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); } .kontakt__tail .closing-caps { margin-top: 0; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1180px) { :root { --gutter: 32px; } .manifest__grid { grid-template-columns: 1fr 1fr; } .manifest__col--center { grid-column: span 2; order: -1; padding-top: 0; } .bridal__veil { grid-template-columns: 1fr; gap: 40px; } .destination-block { grid-template-columns: 1fr; } .destination-block__image { min-height: 320px; aspect-ratio: 4/3; } } @media (max-width: 820px) { :root { --gutter: 24px; } /* mobile nav */ .nav__toggle { display: block; } .nav__menu { position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; gap: 28px; padding: 80px 24px; background: rgba(10, 10, 10, 0.96); transform: translateY(-100%); visibility: hidden; transition: transform 400ms ease, visibility 0s linear 400ms; } .nav.is-open .nav__menu { transform: translateY(0); visibility: visible; transition: transform 400ms ease, visibility 0s; } .nav__link { font-size: 13px; } .nav__logo { order: -1; margin-bottom: 12px; } .nav__logo img { height: 48px; } /* the logo needs to stay visible when the menu is closed */ .nav::before { content: ''; position: absolute; top: 22px; left: 24px; width: 96px; height: 34px; background: url('../img/logo.png') left center / contain no-repeat; filter: brightness(0) invert(1); } .nav.is-open::before { opacity: 0; } .manifest__grid { grid-template-columns: 1fr; } .manifest__col--center { grid-column: auto; order: 0; } .hero__title-sub { font-size: 16px; } .hero__dots { left: 50%; transform: translateX(-50%); opacity: 1; } .portfolio { grid-template-columns: 1fr; } .wir__portraits { grid-template-columns: 1fr; } .story__grid { grid-template-columns: 1fr; } .story__frame--wide { grid-column: auto; } .testimonial__body { padding: 40px 24px; } .destination-block__text { padding: 40px 28px; } .cta-panel { padding: 64px 24px; } .about__portrait { height: 60vh; } .destinations__image { height: 50vh; } .services { margin-top: 90px; } .block-head { margin-top: 96px; } .closing-italic, .closing-caps { margin-top: 96px; } .two-col { margin-top: 64px; gap: 40px; } .bridal__statement { margin-top: 80px; gap: 40px; } .bridal__veil, .wir__portraits { margin-top: 80px; } .center-row--tall { padding: 80px 0 110px; } .spacer { height: 96px; } .wrap, .wrap--wide, .wrap--mid { padding-left: var(--gutter); padding-right: var(--gutter); } } @media (max-width: 560px) { .filmstrip { padding-bottom: 96px; margin-top: 64px; } .form__row { grid-template-columns: 1fr; } .footer__nav { gap: 18px; } .testimonials { padding-top: 96px; } .testimonials__title { padding-bottom: 56px; } .destinations, .about { padding-top: 96px; } .feature { height: 70vh; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .hero__title, .hero__cta { animation: none; opacity: 1; transform: none; } .hero__scroll-line { animation: none; opacity: 0.6; } .hero__slide, .carousel__item { transition-duration: 1ms; } .hero__fade { transition: none; } * { scroll-behavior: auto !important; } } /* ============================================================ RECHTLICHE SEITEN (impressum.html, datenschutz.html) ============================================================ */ .legal-page { background: var(--bg); } .legal-hero { background: var(--dark); padding: clamp(120px, 16vh, 200px) var(--gutter) clamp(48px, 7vh, 90px); text-align: center; } .legal-hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5vw, 58px); line-height: 1.05; color: #fff; } .legal { max-width: 820px; } .legal h2 { margin-top: 56px; font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; font-size: 17px; color: var(--ink); } .legal h2 + p { margin-top: 14px; } .legal p { font-family: var(--font-body); font-size: 16.5px; line-height: 1.8; color: var(--ink-72); } .legal p + p { margin-top: 16px; } .legal a { color: var(--ink); } .legal a:hover { color: var(--accent); } .legal__note { padding: 20px 24px; background: rgba(201, 162, 126, 0.16); border-left: 2px solid var(--accent); font-family: var(--font-sans) !important; font-size: 14px !important; line-height: 1.65 !important; } .legal__back { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--ink-15); } .legal__back a { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; } /* Auf den Rechtsseiten steht das Logo links statt mittig */ .legal-page + * .nav__menu, body:has(.legal-page) .nav__menu { justify-content: flex-start; }