/* --- FORMAA pages.css Shared stylesheet for all subpages. Extracted 1:1 from the original inline styles of: legal_notice.html - privacy_policy.html contact.html - booking.html - thank_you.html Usage in every subpage : --- */ /* --- DESIGN TOKENS ---*/ :root { --navy: #243746; --olive: #8F9B86; --terra: #C96E4F; --offwhite: #F6F4Eb; --cream: #edeae2; --white: #F6F4EF; --ink: #1a1a18; --serif: 'Lexend Giga', Georgia, serif; --sans: 'Montserrat', system-ui, sans-serif; --r-xs: 2px; --r-sm: 5px; --r-md: 10px; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); --transition: 0.45s cubic-bezier(0.16,1,0.3,1); --max-w: 1320px; --gutter: clamp(1.5rem, 5vw, 4rem); --header-height: 60px; --marquee-height: 24px; scroll-behavior: smooth; } @media (max-width: 768px) { :root { --fs-xs: 0.5625rem; /* 9px statt 10px */ --fs-sm: 0.6875rem; /* 11px statt 12px */ --fs-md: 0.8125rem; /* 13px statt 14px */ --fs-base: 0.9375rem; /* 15px statt 16px */ --fs-lg: 1rem; /* 16px statt 18px */ --fs-xl: 1.25rem; /* 20px statt 24px */ --fs-2xl: 1.75rem; /* 28px statt 32px */ /* --fs-3xl / --fs-4xl / --fs-hero: bleiben unverändert, */ /* da sie bereits fluid via clamp() skalieren */ } } /* FONTS */ @font-face {font-family: 'Lexend Giga'; src: url('fonts/lexend-giga-v27-latin/lexend-giga-v27-latin-200.woff2') format('woff2'); font-weight: 200; font-style:normal; font-display: swap; } @font-face {font-family: 'Lexend Giga'; src: url('fonts/lexend-giga-v27-latin/lexend-giga-v27-latin-300.woff2') format('woff2'); font-weight: 300; font-style:normal; font-display: swap; } @font-face {font-family: 'Lexend Giga'; src: url('fonts/lexend-giga-v27-latin/lexend-giga-v27-latin-400.woff2') format('woff2'); font-weight: 400; font-style:normal; font-display: swap; } @font-face {font-family: 'Lexend Giga'; src: url('fonts/lexend-giga-v27-latin/lexend-giga-v27-latin-500.woff2') format('woff2'); font-weight: 500; font-style:normal; font-display: swap; } @font-face {font-family: 'Lexend Giga'; src: url('fonts/lexend-giga-v27-latin/lexend-giga-v27-latin-600.woff2') format('woff2'); font-weight: 600; font-style:normal; font-display: swap; } @font-face {font-family: 'Lexend Giga'; src: url('fonts/lexend-giga-v27-latin/lexend-giga-v27-latin-900.woff2') format('woff2'); font-weight: 900; font-style:normal; font-display: swap; } /* montserrat-100 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 100; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-100italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 100; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-200 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 200; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-200italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 200; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-300italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 300; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 400; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-500italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 500; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-600italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 600; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-700italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 700; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-800 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 800; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-800italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 800; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-900 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */} /* montserrat-900italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 900; src: url('fonts/montserrat-v31-latin/montserrat-v31-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */} /* playfair-display-regular - latin */ @font-face { font-display: swap; font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: url('fonts/playfair-display-v40-latin/playfair-display-v40-latin-regular.woff2') format('woff2'); } /* playfair-display-italic - latin */ @font-face { font-display: swap; font-family: 'Playfair Display'; font-style: italic; font-weight: 400; src: url('fonts/playfair-display-v40-latin-italic.woff2') format('woff2'); } /* playfair-display-500 - latin */ @font-face { font-display: swap; font-family: 'Playfair Display'; font-style: normal; font-weight: 500; src: url('fonts/playfair-display-v40-latin-500.woff2') format('woff2'); } /* playfair-display-500italic - latin */ @font-face { font-display: swap; font-family: 'Playfair Display'; font-style: italic; font-weight: 500; src: url('fonts/playfair-display-v40-latin-500italic.woff2') format('woff2'); } /* playfair-display-600 - latin */ @font-face { font-display: swap; font-family: 'Playfair Display'; font-style: normal; font-weight: 600; src: url('fonts/playfair-display-v40-latin-600.woff2') format('woff2'); } /* playfair-display-600italic - latin */ @font-face { font-display: swap; font-family: 'Playfair Display'; font-style: italic; font-weight: 600; src: url('fonts/playfair-display-v40-latin-600italic.woff2') format('woff2'); } /* playfair-display-700 - latin */ @font-face { font-display: swap; font-family: 'Playfair Display'; font-style: normal; font-weight: 700; src: url('fonts/playfair-display-v40-latin-700.woff2') format('woff2'); } /* playfair-display-700italic - latin */ @font-face { font-display: swap; font-family: 'Playfair Display'; font-style: italic; font-weight: 700; src: url('fonts/playfair-display-v40-latin-700italic.woff2') format('woff2'); } /* playfair-display-800 - latin */ @font-face { font-display: swap; font-family: 'Playfair Display'; font-style: normal; font-weight: 800; src: url('fonts/playfair-display-v40-latin-800.woff2') format('woff2'); } /* playfair-display-800italic - latin */ @font-face { font-display: swap; font-family: 'Playfair Display'; font-style: italic; font-weight: 800; src: url('fonts/playfair-display-v40-latin-800italic.woff2') format('woff2'); } /* playfair-display-900 - latin */ @font-face { font-display: swap; font-family: 'Playfair Display'; font-style: normal; font-weight: 900; src: url('fonts/playfair-display-v40-latin-900.woff2') format('woff2'); } @font-face {font-family: 'Playfair Display'; font-style: italic; font-weight: 900; src: url('fonts/playfair-display-v40-latin-900italic.woff2') format('woff2'); font-display: swap; } /* ─── RESET ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } * { cursor: none !important; } html { scroll-behavior: smooth; font-size: 16px; } @media (max-width: 768px) { html { font-size: 18px; } } body { background: var(--offwhite); color: var(--navy); font-family: var(--sans); font-weight: 200; line-height: 1.7; overflow-x: hidden; font-synthesis: none; } img { display: block; width: 100%; height: 100%; object-fit: cover; } a { text-decoration: none; color: inherit; } ul { list-style: none; } h1,h2,h3 { font-family: var(--serif); font-weight: 200; line-height: 1.12; } em { font-style: italic; color: var(--terra); font-weight: 200; } /* --- CUSTOM CURSOR ---*/ .cursor { position: fixed; width: 8px; height: 8px; background: var(--terra); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width .3s ease, height .3s ease; } .cursor-ring { position: fixed; width: 30px; height: 30px; border: 1px solid rgba(201,110,79,.4); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: width .3s ease, height .3s ease, border-color .3s ease; } .cursor.hover { width: 5px; height: 5px; } .cursor-ring.hover { width: 48px; height: 48px; border-color: var(--terra); } /* Kein Custom Cursor auf Touch-Geräten */ @media (hover: none) and (pointer: coarse) { * { cursor: auto !important; } .cursor, .cursor-ring { display: none !important; } } /* --- SCROLLBAR / SELECTION / GRAIN ---*/ ::-webkit-scrollbar { width: 2px; } ::-webkit-scrollbar-track { background: var(--offwhite); } ::-webkit-scrollbar-thumb { background: var(--terra); } ::selection { background: var(--terra); color: var(--offwhite); } body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: .025; pointer-events: none; z-index: 1000; mix-blend-mode: multiply; } /* --- LOADER ---*/ #loader { position: fixed; inset: 0; z-index: 10000; background: var(--navy); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; transition: opacity .6s ease, visibility .6s ease; } #loader.hidden { opacity: 0; visibility: hidden; } .loader-bar { width: 160px; height: 1px; background: var(--offwhite); position: relative; overflow: hidden; } .loader-bar::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--terra); animation: loaderSlide 1.2s ease forwards; } @keyframes loaderSlide { to { left: 100%; } } /* --- REVEAL ---*/ .reveal-item { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.25,.46,.45,.94), transform .9s cubic-bezier(.25,.46,.45,.94); } .reveal-item.revealed { opacity: 1; transform: translateY(0); } /* ═══════════════════════ GLOBAL MARQUEE ═══════════════════════ */ .site-marquee { position: fixed; top: var(--header-height); left: 0; width: 100%; z-index: 199; background: var(--terra); overflow: hidden; height: 24px; display: flex; align-items: center; cursor: pointer; /* klickbar */ transition: height 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, transform 0.35s ease; } .site-marquee.is-scrolled { background: var(--terra) } /* ── hover-Zustand: Glass / Highlight Effekt ── */ .site-marquee.is-scrolled:hover { background: linear-gradient( 120deg, rgba(201,110,79,0.45) 0%, rgba(201,110,79,0.30) 35%, rgba(201,110,79,0.15) 70% ); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.25); color: #F6F4EF; transform: translateY(-2px); box-shadow: 0 12px 40px rgba(201,110,79,0.35), inset 0 1px 0 rgba(255,255,255,0.35); } .site-marquee__track { display: flex; width: max-content; animation: marquee 25s linear infinite; white-space: nowrap; } .site-marquee__track span { padding-right: 3rem; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--offwhite); transition: color 0.35s ease; } .site-marquee.is-scrolled .site-marquee__track span { color: #F6F4EF; } /* Animation */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* --- NAVIGATION ---*/ .btn-nav { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: var(--ls-button); text-transform: uppercase; border: 1px solid rgba(36,55,70,.3); color: var(--navy); padding: 8px 20px; text-decoration: none; transition: all .25s ease; } .btn-nav:hover { background: var(--terra); border-color: var(--terra); color: var(--offwhite); } .site-header { height: var(--header-height); position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; gap: 2rem; padding: 1.4rem 3rem; transition: padding 0.4s ease; background: rgba(244,242,236,0.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .site-header.scrolled { background: rgba(244,242,236,0.50); backdrop-filter: blur(16px); padding-top: 0.9rem; padding-bottom: 0.9rem; } .site-header__logo { font-family: var(--sans); color: var(--navy); letter-spacing: 0.04em; transition: color 0.3s ease; margin-right: auto; text-decoration: none; display: flex; align-items: center; } .site-header__logo svg .cls-1, .site-header__logo svg .cls-2 { stroke: var(--navy); } .site-header__logo svg .cls-2 { fill: var(--navy); } .site-header__nav { display: flex; gap: 2.2rem; } .site-header__nav a { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); transition: color var(--transition); } .site-header.scrolled .site-header__nav a { color: var(--navy-60); } .site-header__nav a:hover { color: var(--terra) !important; } .site-header__cta { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.55rem 1.3rem; color: var(--navy); transition: all var(--transition); margin-left: -1.3rem; } .site-header.scrolled .site-header__cta { color:var(--navy); } .site-header__cta:hover { background:rgb(201, 110, 79, 0.8); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201, 110, 79, 0.8); color: var(--navy); background: linear-gradient( 120deg, rgba(201,110,79,0.45) 0%, rgba(201,110,79,0.30) 35%, rgba(201,110,79,0.15) 70% ); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(201,110,79,0.35), inset 0 1px 0 rgba(255,255,255,0.35); } .site-header__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: none; padding: 4px; } .site-header__burger span { display: block; width: 22px; height: 1.5px; background: var(--navy); transition: background 0.3s, transform 0.3s; } @media (max-width: 768px) { .site-header { padding: 1.2rem 1.5rem; } .site-header__nav { display: none; } .site-header__cta { display: none; } .site-header__burger { display: flex; } } .menu-bar { display: block; width: 1.75rem; height: 1.5px; background: var(--navy); transition: all .3s ease; } .menu-bar:last-child { width: 1.25rem; } #menu-toggle.open .menu-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } #menu-toggle.open .menu-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } #menu-toggle.open .menu-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); width: 1.75rem; } #mobile-menu.hidden { display: none; } #mobile-menu { background: var(--offwhite); border-top: 1px solid var(--ink-06); padding: 2rem 1.5rem; } #mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; } .mobile-nav-link { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-45); text-decoration: none; transition: color .25s ease; } .mobile-nav-link:hover, .mobile-nav-link.active { color: var(--terra); } /* --- PAGE HEADER (shared) ---*/ .page-header { padding: 11rem 3rem 2rem; position: relative; overflow: hidden; margin-top: calc(var(--header-height) + var(--marquee-height)); } @media (max-width: 768px) { .page-header { padding: 9rem 1.5rem 3.5rem; } } .page-header__watermark { position: absolute; top: 0; right: 0; width: 55%; height: 100%; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; pointer-events: none; opacity: .04; padding-right: 3rem; } .page-header__watermark svg { width: 100%; max-width: 600px; fill: var(--navy); } .page-header__inner { max-width: 1920px; margin: 0 auto; position: relative; z-index: 1; text-align: center; } .page-header__title { font-family: var(--serif); font-weight: 100; font-size: clamp(2.2rem, 10vw, 5.5rem) !important; line-height: 1.1; letter-spacing: var(--ls-heading); color: var(--terra); text-align: center; margin: 0 auto; } /* Spezielle Korrektur für sehr schmale Geräte (unter 400px) */ @media (max-width: 400px) { .page-header__inner { padding-left: 1rem; padding-right: 1rem; } .page-header__title { letter-spacing: var(--ls-heading); /* Verringert den Abstand zwischen Buchstaben, um Platz zu sparen */ } } .page-header__sub { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; justify-content: center; } .page-header__rule { height: 1px; width: 40px; background: var(--terra); opacity: .5; } .page-header__caption { font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: var(--ls-label);; text-transform: uppercase; color: var(--ink-30); } /* privacy variant */ .page-header__subtitle { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; } .page-header__line { height: 1px; width: 40px; background: var(--terra); opacity: 0.5; } .page-header__intro { font-family: var(--sans); font-size: 0.82rem; font-weight: 500; color: var(--navy); line-height: 1.95; margin-bottom: 0rem; text-align: left; width: auto; } .page-header__inner_text { max-width: 1920px; margin: 0 auto; padding: 0 3rem; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 2fr; gap: 5rem; } /* ══════════════════════════════════════ FOOTER ══════════════════════════════════════ */ .site-footer { background: var(--navy); padding: 6rem 4rem; border-top: none; } .site-footer__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 5rem; } .site-footer svg.logo { height: 32px; width: auto; margin-bottom: 2rem; display: block; } .site-footer__tagline { font-family: var(--sans); font-size: 13px; font-weight: 500; color: rgba(246,244,239,0.4); line-height: 1.9; max-width: 30rem; } .site-footer__email { display: block; margin-top: 2rem; font-family: var(--sans); font-size: 13px; color: var(--terra); text-decoration: none; transition: color 0.25s ease; font-weight: 500; } .site-footer__email:hover { color: var(--offwhite); } .site-footer__col-title { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(246,244,239,0.25); margin-bottom: 2rem; display: block; } /* ── Footer Newsletter ─────────────────────────────── */ .ft-nl { margin-top: 2.5rem; } .ft-nl__label { display: block; font-family: var(--sans); letter-spacing: 0.3em; text-transform: uppercase; font-size: 13px; font-weight: 600; color: rgba(246,244,239,0.4); line-height: 1.9; max-width: 28rem; margin-bottom: 0.9rem; } .ft-nl__row { display: flex; align-items: center; gap: 0; border-bottom: 1px solid rgba(246,244,239,0.15); padding-bottom: 0.5rem; max-width: 26rem; transition: border-color 0.25s ease; } .ft-nl__row:focus-within { border-color: rgba(246,244,239,0.4); } .ft-nl__input { flex: 1; background: transparent; border: none; outline: none; font-family: var(--sans); font-size: 13px; font-weight: 500; color: rgba(246,244,239,0.7); padding: 0.2rem 0; caret-color: var(--terra); } .ft-nl__input::placeholder { color: rgba(246,244,239,0.2); font-weight: 500; } .ft-nl__btn { background: none; border: none; cursor: pointer; padding: 0.2rem 0 0.2rem 0.75rem; color: rgba(246,244,239,0.3); display: flex; align-items: center; transition: color 0.25s ease; flex-shrink: 0; } .ft-nl__btn:hover { color: var(--terra); } .ft-nl__fine { font-family: var(--sans); font-size: 11px; font-weight: 500; color: rgba(246,244,239,0.2); margin-top: 0.65rem; letter-spacing: 0.02em; transition: color 0.3s ease; } .ft-nl__fine.success { color: var(--terra); } /* Mobile: ft-nl volle Breite */ @media (max-width: 768px) { .ft-nl { margin-top: 1.5rem; } .ft-nl__row { max-width: 100%; } .ft-nl__label { font-size: 12px; } } .site-footer__nav { list-style: none; display: flex; flex-direction: column; gap: 1.2rem; } .site-footer__nav a { font-family: var(--sans); font-size: 14px; font-weight: 500; color: rgba(246,244,239,0.55); text-decoration: none; transition: color 0.25s ease; } .site-footer__nav a:hover { color: var(--terra);font-weight: 500;} .site-footer__nav a.accent { color: var(--terra); text-transform: uppercase; } .site-footer__nav a.accent:hover {color: rgba(246,244,239,0.55); text-transform: uppercase;} .site-footer__info { font-family: var(--sans); font-size: 13px; font-weight: 500; color: rgba(246,244,239,0.3); line-height: 1.8; margin-bottom: 1.5rem; } .site-footer__bottom { max-width: 1280px; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(246,244,239,0.08); display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.75rem; } .site-footer__copy { font-family: var(--f-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(246,244,239,0.2); } .site-footer__legal { display: flex; gap: 1.5rem; } .site-footer__legal a { font-family: var(--f-sans); font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(246,244,239,0.2); text-decoration: none; transition: color 0.25s ease; } .site-footer__legal a:hover { color: var(--terra); } /* ════════════════════════════════════════ FOOTER: MOBILE (≤ 768px) Layout: Logo-Zeile oben (volle Breite) Nav-Spalten nebeneinander darunter ════════════════════════════════════════ */ @media (max-width: 768px) { .site-footer { padding: 2.5rem 1.25rem 2rem; /* weniger Luft oben/unten */ } /* Grid: Logo-Spalte oben über volle Breite, die zwei Nav-Spalten nebeneinander darunter */ .site-footer__grid { grid-template-columns: 1fr 1fr; /* 2 gleichbreite Spalten */ grid-template-rows: auto auto; gap: 1.5rem 2rem; } /* Erste Spalte (Logo + Tagline + Mail) → volle Breite */ .site-footer__grid > div:first-child { grid-column: 1 / -1; /* streckt über beide Spalten */ } /* Tagline kürzer auf Mobile */ .site-footer__tagline { max-width: 100%; line-height: 1.7; } .site-footer__copy { font-size: 9px; } /* E-Mail-Abstand reduzieren */ .site-footer__email { margin-top: 0.75rem; } /* Nav-Abstände kompakter */ .site-footer__nav { gap: 0.5rem; /* war 0.75rem → wirkt kompakter */ } /* Col-Titel-Abstand reduzieren */ .site-footer__col-title { margin-bottom: 0.75rem; } /* Bottom-Bar: untereinander auf sehr kleinen Screens */ .site-footer__bottom { margin-top: 1.5rem; padding-top: 1.25rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; } /* Legal-Links: enger zusammen */ .site-footer__legal { gap: 1rem; } } /* --- UTILITIES (shared) ---*/ .space-y-1 > * + * { margin-top: .35rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-8 > * + * { margin-top: 2rem; } .accent { color: var(--terra); } /* --- LEGAL NOTICE (legal_notice.html) ---*/ .content-wrap { max-width: 1280px; margin: 0 auto; padding: 5rem 3rem 8rem; display: grid; grid-template-columns: 300px 1fr; gap: 5rem; } @media (max-width: 900px) { .content-wrap { grid-template-columns: 1fr; gap: 0; padding: 3.5rem 1.5rem 6rem; } } .content-sidebar { position: sticky; top: 6rem; height: fit-content; min-width: 280px; } @media (max-width: 900px) { .content-sidebar { display: none; } } .sidebar-tag p { font-family: 'Lexend Giga'; font-size: 0.8rem; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 2; display: block; } .sidebar-tag p:first-child { color: var(--olive); font-weight: 600; } .sidebar-tag p:last-child { color: var(--olive); } .impressum-section { border-top: 1px solid var(--terra); padding-top: 3rem; margin-top: 3rem; } .impressum-label { font-family: 'Lexend Giga'; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--terra); margin-bottom: 3rem; display: block; } .impressum-value { font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--navy); line-height: 1.85; } .impressum-value p + p { margin-top: .35rem; } .impressum-value .strong { font-weight: 600; color: var(--navy); font-size: .95rem; } .impressum-value .meta { font-family: 'Lexend Giga'; font-size: .85rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--olive); margin-top: .25rem; } .impressum-value .accent { color: var(--terra); } .impressum-body { font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--navy); line-height: 1.85; } .impressum-body a { color: var(--terra); text-decoration: none; transition: opacity .2s ease; } .impressum-body a:hover { opacity: .7; } .legal-sub { font-family: var(--serif)!important; font-size: .85rem; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--olive); margin-bottom: .75rem; display: block; } .nav-links-row { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; padding-top: 2rem; } .link-back, .link-forward { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; text-decoration: none; transition: color .25s ease; padding: 0.7rem 1.6rem; border: 1.5px solid currentColor; } .link-back { color: var(--terra); } .link-forward { color: var(--ink-30); } .link-back:hover { color: var(--navy); } .link-forward:hover { color: var(--terra); } .social-icon { transition: all .3s ease; } /* --- PRIVACY POLICY (privacy_policy.html) ---*/ .main-wrap { max-width: 1280px; margin: 0 auto; padding: 5rem 3rem 7rem; display: grid; grid-template-columns: 300px 1fr; gap: 5rem; } @media (max-width: 900px) { .main-wrap { grid-template-columns: 1fr; gap: 3.5rem; padding: 3.5rem 1.5rem 5rem; } } .info-sidebar { position: sticky; top: 7rem; height: fit-content; } .sidebar-toc-title { font-family: 'Lexend Giga'; font-size: 0.8rem; font-weight: 200; letter-spacing: 0.3em; text-transform: uppercase; color: var(--olive); display: block; margin-bottom: 1.5rem; } .sidebar-toc { list-style: none; } .sidebar-toc li a { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--terra); font-family: var(--sans); font-size: 0.75rem; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s ease; } @media (max-width: 768px) { .sidebar-toc { display: none; } } .sidebar-toc li a:hover { color: var(--terra); } .sidebar-toc li a .toc-num { font-size: 14px; letter-spacing: 0.15em; color: var(--terra); min-width: 1.5rem; font-family: 'Lexend Giga'; } .sidebar-meta { margin-top: 0rem; padding: 1.4rem 1.5rem; background: var(--navy); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 16px 48px rgba(0,0,0,0.3); color: #ffffff; } .sidebar-meta__title { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--terra); display: block; margin-bottom: 0.65rem; } .sidebar-meta__text { font-family: var(--sans); font-size: 0.78rem; font-weight: 300; color: var(--offwhite); line-height: 1.75; display: block; } .privacy-content { display: flex; flex-direction: column; } .privacy-section { border-top: 1px solid var(--terra); padding-top: 3rem; margin-top: 3rem; } .privacy-section:first-child { border-top: none; padding-top: 0; margin-top: 0; } .privacy-label { font-family: var(--serif); font-size: 1rem; font-weight: 600; text-transform: uppercase; color: var(--terra); display: block; margin-bottom: 1.5rem; } .privacy-heading { font-family: var(--serif); font-weight: 100; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 0.95; letter-spacing: -0.01em; color: var(--navy); margin-bottom: 1.75rem; } .privacy-body { font-family: var(--sans); font-size: 0.84rem; font-weight: 500; color: var(--navy); line-height: 1.95; } .privacy-body + .privacy-body { margin-top: 0.85rem; } .privacy-body a { color: var(--terra); text-decoration: none; transition: opacity 0.2s ease; word-break: break-all; } .privacy-body a:hover { opacity: 0.7; } .privacy-body ul { margin-top: 0.85rem; list-style: none; } .privacy-body ul li { padding-left: 1.25rem; position: relative; margin-bottom: 0.4rem; } .privacy-body ul li::before { content: ''; position: absolute; left: 0; color: var(--terra); font-size: 0.85rem; } .privacy-sublabel { font-family: 'Lexend Giga'; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--olive); margin-bottom: 0.6rem; margin-top: .75rem; display: block; } .info-card { margin-top: 1.25rem; padding: 1.5rem; background: var(--navy); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 16px 48px rgba(0,0,0,0.3); color: #ffffff; } .info-card__name { font-family: var(--sans); font-size: 0.84rem; font-weight: 600; color: var(--offwhite); display: block; margin-bottom: 0.25rem; } .info-card__role { font-family: var(--sans); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--terra); display: block; margin-bottom: 0.75rem; } .info-card__line { font-family: var(--sans); font-size: 0.82rem; font-weight: 500; color: var(--offwhite); line-height: 1.75; display: block; } .info-card__line a { color: var(--terra); text-decoration: none; } .info-card__line a:hover { color: var(--offwhite); } .info-card__muted { font-size: 0.78rem; color: var(--offwhite); } .right-item { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--navy-60); } .right-art { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra); white-space: nowrap; padding-top: 0.15rem;min-width: 88px; flex-shrink: 0; } .right-text { font-family: var(--sans); font-size: 0.82rem; font-weight: 500; color: var(--navy); line-height: 1.75; } .link-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; } .link-list a { font-family: var(--sans); font-size: 0.82rem; font-weight: 500; color: var(--terra); text-decoration: none; } .link-list a:hover { opacity: 0.7; } .nav-links { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; margin-top: 0.5rem; } .nav-link-primary { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terra); text-decoration: none; transition: opacity 0.2s ease; } .nav-link-primary:hover { opacity: 0.7; } .nav-link-secondary { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy); text-decoration: none; transition: color 0.2s ease; } .nav-link-secondary:hover { color: var(--terra); } /* --- RESERVATION (booking.html) ---*/ .reservation-intro { margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 1rem; } .reservation-intro p { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; color:var(--navy); line-height: 1.9; } .reservation-intro a { color: var(--terra); text-decoration: none; } .reservation-intro a:hover { text-decoration: underline; } /* Page header — reservation eyebrow label */ .page-header__eyebrow { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--terra); display: block; margin-bottom: 1rem; } /* Main layout — reservation (1fr 2fr) */ .main-wrap--reservation { max-width: 1280px; margin: 0 auto; padding: 5rem 3rem 7rem; display: grid; grid-template-columns: 1fr 2fr; gap: 5rem; } @media (max-width: 900px) { .main-wrap--reservation { grid-template-columns: 1fr; gap: 3.5rem; padding: 3.5rem 1.5rem 5rem; } } /* Package display (JS-controlled) */ #package-display { display: none; margin-bottom: 2.5rem; } .package-display__label { font-family: 'Lexend Giga'; font-size: 0.8rem; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 2; display: block; color: #8F9B86; } .package-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(36,55,70,0.2); border: 1px solid rgb(36,55,70); padding: 7px 14px; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(36,55,70); } .info-sidebar__intro { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; color:var(--navy); line-height: 1.9; } /* Info lines */ .info-line { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--terra); } .info-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--terra); flex-shrink: 0; } .info-line__key { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; color:var(--navy); line-height: 1.9; } .info-line__val { font-family: var(--sans); font-size: 0.9rem; font-weight: 400; color: var(--navy); display: block; line-height: 1.6; } .info-line__val--accent { color: var(--terra); text-decoration: none; } .info-line__val--muted { font-size: 0.8rem; color: var(--navy); } /* Notice box */ .notice-box { margin-top: 2rem; padding: 1.4rem 1.5rem; background: var(--navy); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 16px 48px rgba(0,0,0,0.3); color: #ffffff; } .notice-box__title { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--terra); display: block; margin-bottom: 0.65rem; } .notice-box__text { font-family: var(--sans); font-size: 0.9rem; font-weight: 300; color: #ffffff; line-height: 1.75; display: block; margin-bottom: 0.4rem; } .notice-box__highlight { font-family: var(--sans); font-size: 0.78rem; font-weight: 500; color: var(--terra); display: block; line-height: 1.75; } /* Form wrapper — dark navy card */ .form-wrap { background: var(--navy); padding: 3rem 2.5rem; } /* Form structure */ .enquire-form { display: flex; flex-direction: column; gap: 1.5rem; } .form-label { font-family: var(--sans); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; color: var(--offwhite); display: block; margin-bottom: 0.55rem; } .form-input, .form-textarea, .form-select { width: 100%; font-family: var(--sans); font-size: 0.78rem; padding: 13px 16px; border-radius: 0; outline: none; transition: border-color 0.25s ease, background 0.25s ease; background: rgba(244,242,236,0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 16px 48px rgba(0,0,0,0.3); color: #ffffff; } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: rgba(255,255,255,1); box-shadow: 0 12px 40px rgba(36,55,70,0.55), inset 0 1px 0 rgba(255,255,255,0.45); } .form-input::placeholder, .form-textarea::placeholder, .form-select::placeholder { color: rgba(246,244,239,0.3); } /* Read-only package field */ .form-input[readonly] { color: var(--terra); border-color: rgba(201,110,79,0.4); background: rgba(201,110,79,0.08); } .form-textarea { resize: vertical; min-height: 110px; } /* Select arrow */ .form-select option { background: var(--offwhite); color: var(--ink); } .select-wrap { position: relative; } .select-wrap::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ink-30); pointer-events: none; transition: border-top-color 0.25s ease; } .select-wrap:focus-within::after { border-top-color: var(--terra); } /* Form grid row */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } /* Divider */ .form-divider { height: 1px; background: var(--terra); margin: 0.5rem 0; opacity: 0.4; } /* Privacy checkbox */ .form-privacy, .checkbox-wrap { display: flex; gap: 12px; align-items: flex-start; } .form-checkbox { width: 16px; height: 16px; min-width: 16px; border: 1px solid var(--terra); background: transparent; appearance: none; -webkit-appearance: none; margin-top: 4px; transition: all 0.2s ease; position: relative; } .form-checkbox:checked { background: var(--terra); border-color: var(--terra); } .form-checkbox:checked::after { content: ''; position: absolute; left: 3px; top: 1px; width: 5px; height: 8px; border: 1.5px solid var(--offwhite); border-top: none; border-left: none; transform: rotate(45deg); } .form-privacy-label, .checkbox-label { font-family: var(--sans); font-size: 0.85rem; font-weight: 400; color: var(--offwhite); line-height: 1.75; } .form-privacy-label a, .checkbox-label a { color: var(--terra); text-decoration: none; font-weight: 500; } .form-privacy-label a:hover, .checkbox-label a:hover { text-decoration: underline; } /* Privacy validation error */ .form-privacy-error { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; color: var(--terra); margin-bottom: 0.5rem; letter-spacing: 0.02em; } /* Submit button */ /* Submit button */ .btn-submit { display: inline-flex; justify-content: center; align-items: center; border: none; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: var(--ls-button); text-transform: uppercase; padding: 0.9rem 2rem; border-radius: 0; transition: all 0.3s ease; cursor: pointer; white-space: nowrap; background: var(--terra); color: var(--offwhite); width: 100%; } .btn-submit:hover { background: linear-gradient(120deg, rgba(201,110,79,0.45) 0%, rgba(201,110,79,0.30) 35%, rgba(201,110,79,0.15) 70%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.25); color: var(--offwhite); transform: none; box-shadow: 0 12px 40px rgba(201,110,79,0.35), inset 0 1px 0 rgba(255,255,255,0.35); } /* Fine print */ .form-fine { font-family: var(--sans); font-size: 0.78rem; font-weight: 300; color: #ffffff; line-height: 1.75; display: block; margin-bottom: 0.4rem; } /* Form field wrapper */ .form-field { position: relative; } /* --- CONTACT (contact.html) ---*/ /* Main content wrapper */ .main-content { max-width: 1280px; margin: 0 auto; padding: 5rem 3rem 7rem; } @media (max-width: 768px) { .main-content { padding: 3.5rem 1.5rem 6rem; } } /* Intro grid */ .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; margin-bottom: 0; } @media (max-width: 768px) { .intro-grid { grid-template-columns: 1fr; gap: 3rem; margin-bottom: 0rem; } } .intro-body { font-family: var(--sans); font-weight: 500; line-height: 1.85; } .intro-body p:first-child { font-size: 1.25rem; color: var(--navy); margin-bottom: 1rem; } .intro-body p:last-child { font-size: 0.875rem; color: var(--navy); } /* Contact items */ .contact-item { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--terra); transition: background 0.2s ease; } .contact-item:last-child { border-bottom: none; } .contact-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--terra); flex-shrink: 0; transition: background 0.25s ease, border-color 0.25s ease; } .contact-item__key { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-30); display: block; margin-bottom: 0.3rem; } .contact-item__val { font-family: var(--sans); font-size: 0.875rem; font-weight: 500; color: var(--ink-70); text-decoration: none; display: block; line-height: 1.55; } .contact-item__val--accent { color: var(--terra); } .contact-item__val--muted { font-size: 0.8rem; color: var(--ink-30); } /* Contact section block */ .contact-section { padding-top: 1rem; padding-left: 12rem; padding-right: 12rem; padding-bottom: 8rem; margin-top: 4.5rem; } @media (max-width: 900px) { .contact-section { padding-left: 1.5rem; padding-right: 1.5rem; } } .section-label { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--terra); margin-bottom: 3rem; display: block; } /* Decorative rule line */ .method__line { flex: 1; height: 1px; background: rgb(201,110,79); opacity: 1; } /* Form layout — contact (single column) */ .form-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @media (max-width: 900px) { .form-layout { gap: 3rem; } } .form-layout__heading { font-family: var(--serif); font-weight: 100; font-size: clamp(2rem, 5vw, 4rem); line-height: 0.92; letter-spacing: var(--ls-heading); color: var(--terra); margin-bottom: 1.25rem; } .form-layout__desc { font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--navy); line-height: 1.85; } /* Form success state */ .form-success { display: none; text-align: center; padding: 3.5rem 2rem; border: 1px solid rgba(201,110,79,0.2); border-left: 2px solid var(--terra); background: rgba(201,110,79,0.03); opacity: 0; transition: opacity 0.5s ease; } .form-success__icon { margin: 0 auto 1.25rem; display: block; } .form-success__title { font-family: var(--serify); font-weight: 100; font-size: 2rem; letter-spacing: 0.02em; color: var(--navy); margin-bottom: 0.6rem; } .form-success__text { font-family: var(--sans); font-size: 0.875rem; font-weight: 300; color: var(--ink-45); } /* Spacing helpers */ .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .flex-wrap-gap { display: flex; flex-wrap: wrap; gap: 1rem; } .space-y > * + * { margin-top: 1.25rem; } /* Newsletter wrap */ .newsletter-wrap { background: var(--navy); border: 1px solid var(--ink-08); padding: 2.5rem; } @media (max-width: 768px) { .newsletter-wrap { padding: 1.75rem; } } .newsletter-fine { font-family: var(--sans); font-size: 0.85rem; font-weight: 400; color: var(--offwhite); margin-top: 1rem; display: block; } /* --- THANK YOU (thank_you.html) Dark navy full-screen layout ---*/ /* Body override for thank_you page — add class="page--thank-you" to */ body.page--thank-you { background: var(--navy); color: #ffffff; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } /* Subtle vertical grid lines */ /* Centered content card */ .content--thank-you { position: relative; z-index: 1; text-align: center; padding: 2rem; max-width: 580px; width: 100%; } /* Animated check circle */ .check-wrap--thank-you { width: 64px; height: 64px; border: 1px solid rgba(201,110,79,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2.5rem; animation: fadeUp 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.2s both; } .check-wrap--thank-you svg { width: 22px; height: 22px; stroke: var(--terra); stroke-width: 1.5; fill: none; stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawCheck 0.7s ease 0.9s forwards; } @keyframes drawCheck { to { stroke-dashoffset: 0; } } /* Tag label */ .tag--thankyou { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--terra); display: block; animation: fadeUp 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.3s both; } /* Big heading */ .heading--thank-you { font-family: var(--serif); font-weight: 100; font-size: clamp(4rem, 14vw, 8rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--terra); margin: 1.25rem 0 1.75rem; animation: fadeUp 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.4s both; } h1.thank-you{ font-family: var(--serif); font-weight: 100; font-size: clamp(4rem, 14vw, 8rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--terra); margin: 1.25rem 0 1.75rem; animation: fadeUp 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.4s both; } /* Short divider */ .divider--thank-you { width: 36px; height: 1px; background: var(--terra); opacity: 0.5; margin: 0 auto 2.5rem; animation: fadeUp 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.45s both; } /* Subtitle text */ .subtitle--thank-you { font-family: var(--sans); font-size: 0.875rem; font-weight: 300; color: var(--offwhite); line-height: 1.9; margin-bottom: 2.5rem; animation: fadeUp 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.5s both; } /* Info rows (dots + email) */ .info-row--thank-you { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 0.6rem; font-family: var(--sans); font-size: 0.75rem; font-weight: 300; color: var(--offwhite); letter-spacing: 0.04em; animation: fadeUp 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.6s both; } .info-row--thank-you span { color: var(--offwhite); } .info-row--thank-you a { color: var(--terra); text-decoration: none; transition: opacity 0.2s ease; } .info-row--thank-you a:hover { opacity: 0.7; } /* Back-to-home button */ .btn-back--thank-you { display: inline-block; margin-top: 2.5rem; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: var(--ls-button); text-transform: uppercase; color: var(--offwhite); background: var(--terra); padding: 14px 32px; text-decoration: none; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease; animation: fadeUp 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.7s both; } .btn-back--thank-you:hover { background: linear-gradient(120deg, rgba(201,110,79,0.45) 0%, rgba(201,110,79,0.30) 35%, rgba(201,110,79,0.15) 70%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.25); color: var(--offwhite); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(201,110,79,0.35), inset 0 1px 0 rgba(255,255,255,0.35); } /* fadeUp — shared by all animated thank_you elements */ @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════ pages.css — MOBILE RESPONSIVE ERGÄNZUNGEN ═══════════════════════════════════════════════════ */ /* ─── THANK YOU: Mobile ─── */ @media (max-width: 768px) { body.page--thank-you { padding: 1rem; /* Sicherstellen dass Content nicht über Nav steht */ padding-top: 5rem; justify-content: flex-start; overflow-y: auto; } .content--thank-you { padding: 1.25rem 1rem 2.5rem; max-width: 100%; } h1.thank-you { font-size: clamp(3rem, 18vw, 5.5rem); margin: 1rem 0 1.25rem; } .subtitle--thank-you { font-size: 0.82rem; line-height: 1.8; margin-bottom: 2rem; } .info-row--thank-you { font-size: 0.7rem; flex-wrap: wrap; gap: 0.4rem; } .btn-back--thank-you { margin-top: 2rem; padding: 14px 24px; font-size: 0.65rem; } .check-wrap--thank-you { margin-bottom: 1.75rem; } } /* ─── NAVIGATION: Mobile (pages) ─── */ @media (max-width: 768px) { .site-header { padding: 0.9rem 1.25rem; } .site-header__nav, .site-header__cta { display: none; } .site-header__burger { display: flex; } } /* ─── PAGE HEADER: Mobile ─── */ @media (max-width: 768px) { .page-header { padding: 8rem 1.25rem 1.5rem; } .page-header__title { font-size: clamp(2.8rem, 13vw, 5rem); line-height: 0.95; } .page-header__inner_text { grid-template-columns: 1fr; gap: 2rem; padding: 0 1.25rem; } .page-header__watermark { width: 90%; opacity: 0.03; } } /* ─── CONTENT WRAP (Legal/Privacy): Mobile ─── */ @media (max-width: 768px) { .content-wrap { grid-template-columns: 1fr; gap: 0; padding: 2.5rem 1.25rem 5rem; } .content-sidebar { display: none; } .main-wrap { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 1.25rem 5rem; } .info-sidebar { position: static; } } /* ─── RESERVATION: Mobile ─── */ @media (max-width: 768px) { .main-wrap--reservation { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 1.25rem 5rem; } .form-wrap { padding: 2rem 1.25rem; } .form-row { grid-template-columns: 1fr; } } /* ─── CONTACT: Mobile ─── */ @media (max-width: 768px) { .main-content { padding: 2.5rem 1.25rem 5rem; } .intro-grid { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 0rem; } .contact-section { padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 4rem; margin-top: 0rem; } .nav-links-row { flex-direction: column; gap: 0.75rem; align-items: flex-start; } .link-back, .link-forward { width: 100%; justify-content: center; } } /* ─── FORM ELEMENTE: Mobile ─── */ @media (max-width: 768px) { .form-input, .form-textarea, .form-select { font-size: 1rem; /* Verhindert iOS-Zoom bei Focus */ padding: 12px 14px; } .form-row { grid-template-columns: 1fr; } .btn-submit { padding: 1rem 1.5rem; font-size: 0.72rem; } } /* ─── IMPRESSUM: Mobile ─── */ @media (max-width: 768px) { .impressum-section { padding-top: 2rem; margin-top: 2rem; } .impressum-value { font-size: 0.85rem; } } /* ─── BG-LINES: Mobile ausblenden ─── */ @media (max-width: 768px) { .bg-lines { display: none; } } /* Expandable Text — global (kein Media Query!) */ .expandable-text.is-collapsible { max-height: 4.75em; /* Sichtbare Höhe im kollabierten Zustand — passe diesen Wert an */ overflow: hidden; transition: max-height 0.4s ease; position: relative; } .expandable-text.is-collapsible::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2.5em; /* Höhe des Verlaufs — nach Geschmack anpassen */ background: linear-gradient( to bottom, transparent 0%, var(--offwhite) 100% /* ← Hintergrundfarbe deiner Sektion eintragen */ ); pointer-events: none; } .expandable-text.is-collapsible.is-expanded { max-height: 2000px; /* Groß genug für den vollen Text */ } .expandable-text.is-collapsible.is-expanded::after { display: none; } .expand-toggle { background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; color: var(--terra); padding: 0.5rem 0; display: flex; align-items: center; gap: 0.4rem; } .toggle-arrow { display: inline-block; transition: transform 0.3s ease; font-size: 0.6rem; } .expand-toggle.is-expanded .toggle-arrow { transform: rotate(180deg); }