/*
Theme Name: Alpengasthof Strutz (VN Child)
Theme URI: https://alpengasthof-strutz.at
Author: Vision Nine Studio
Description: Child-Theme v0.4 — Form-inspired Sage Heritage. User-defined Palette: Sage Olive (#A1A188) + Charcoal-Green (#2D3530) + Cream-Stone (#E6E2DD). Fraunces Display + DM Sans Body. Editorial-Cut Hero. Sektion-by-Sektion gebaut.
Author URI: https://vision-nine.com
Template: vn-foundation
Version: 1.0.3
License: Proprietary
Text Domain: alpengasthof-strutz
*/
:root {
--sage-50: #F5F6F0;
--sage-100: #E6E9DB;
--sage-200: #CFD4BB;
--sage-300: #B2BA93;
--sage-400: #9AA372;
--sage-500: #858E5C;
--sage-600: #6F754A;
--sage-700: #595D3C;
--sage-800: #4E5037;
--sage-900: #434431;
--sage-950: #242519;
--ink-900: var(--sage-900);
--ink-700: var(--sage-900);
--ink-500: var(--sage-800);
--ink-300: var(--sage-700);
--paper-50: #FBFAF6;
--paper: var(--sage-100);
--on-dark-strong: var(--paper-50);
--on-dark: var(--paper);
--on-dark-muted: var(--sage-200);
--divider-on-dark: color-mix(in srgb, var(--paper) 18%, transparent);
--surface-raised: var(--sage-700);
--bd-100: var(--sage-200);
--copper-light: #D9B894;
--font-display: "Newsreader", "GT Sectra", "Cormorant Garamond", Georgia, serif;
--font-body: "DM Sans", "Inter", -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
--page-max: 108rem;
--page-wide: 120rem;
--page-narrow: 56rem;
--gutter: clamp(1.25rem, 4vw, 4rem);
--space-section: clamp(5rem, 12vw, 9rem);
--space-section-sm: clamp(3rem, 7vw, 5rem);
--vn-grain: url("data:image/svg+xml;utf8,");
--brand-primary: var(--ink-700);
--brand-accent: var(--sage-300);
--brand-bg: var(--paper-50);
--brand-fg: var(--ink-500);
--brand-muted: var(--ink-300);
--vn-bg: var(--brand-bg);
--vn-text: var(--brand-fg);
--vn-accent: var(--brand-accent);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html {
overflow-x: clip;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
background-color: var(--sage-800);
background-image: var(--vn-grain);
background-attachment: fixed;
background-size: 360px 360px;
background-repeat: repeat;
color: var(--paper);
font-family: var(--font-body);
font-size: 1.1875rem;
line-height: 1.65;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 144;
color: var(--paper);
letter-spacing: -0.025em;
line-height: 1.02;
margin: 0 0 1rem;
}
h1 { font-size: clamp(3rem, 7vw, 6.5rem); }
h2 { font-size: clamp(2.25rem, 5vw, 4.5rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
h4 { font-size: 1.125rem; }
em, .vn-italic {
font-style: italic;
font-variation-settings: "opsz" 144;
color: var(--sage-300);
}
p {
margin: 0 0 1.25em;
color: var(--ink-500);
}
a { color: var(--sage-300); transition: color 200ms ease; }
a:hover { color: var(--sage-500); }
img { max-width: 100%; height: auto; display: block; }
.vn-container {
max-width: var(--page-max);
margin: 0 auto;
padding-inline: var(--gutter);
}
.vn-container--wide { max-width: var(--page-wide); }
.vn-container--narrow { max-width: var(--page-narrow); }
[data-section] {
padding-block: var(--space-section);
padding-inline: var(--gutter);
}
[data-section] > div[class$="__inner"] {
max-width: var(--page-max);
margin: 0 auto;
}
[data-section][data-section="hinweise"],
[data-section][data-section="konditionen"],
[data-section][data-section="preise"],
[data-section][data-section="ausstattung"] {
background: var(--sage-100);
}
[data-section] + [data-section] { border-top: none; }
[class*="__eyebrow"], .vn-eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.75rem;
font-weight: 600;
color: var(--sage-300);
margin: 0 0 1.5rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
[class*="__eyebrow"]::before, .vn-eyebrow::before {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--sage-300);
}
.vn-on-dark [class*="__eyebrow"],
.vn-on-dark .vn-eyebrow,
.vn-final-cta__eyebrow,
.vn-muehle-zahlen__eyebrow { color: var(--on-dark-muted); }
.vn-on-dark [class*="__eyebrow"]::before,
.vn-on-dark .vn-eyebrow::before,
.vn-final-cta__eyebrow::before,
.vn-muehle-zahlen__eyebrow::before { background: var(--on-dark-muted); }
.vn-button {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-body);
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.01em;
padding: 0 0 0.5rem;
border: 0;
border-bottom: 1px solid rgba(15, 22, 18, 0.5);
background: transparent;
color: var(--ink-900);
border-radius: 0;
text-decoration: none;
cursor: pointer;
transition: border-color 280ms ease, color 280ms ease;
line-height: 1.2;
}
.vn-button::after {
content: "⟶";
display: inline-block;
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
font-family: var(--font-body);
font-size: 1.45em;
font-weight: 300;
line-height: 1;
margin-left: 0.4rem;
}
.vn-button:hover,
.vn-button:focus-visible {
border-bottom-color: var(--ink-900);
background: transparent;
color: var(--ink-900);
}
.vn-button:hover::after,
.vn-button:focus-visible::after { transform: translateX(6px); }
.vn-button__hint {
text-transform: uppercase;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.22em;
color: rgba(15, 22, 18, 0.7);
}
.vn-button__sep {
color: rgba(15, 22, 18, 0.4);
}
.vn-button__label {
font-weight: 500;
}
.vn-button--primary {
color: var(--ink-900);
border-bottom-color: var(--ink-900);
font-weight: 600;
}
.vn-button--primary:hover,
.vn-button--primary:focus-visible {
color: var(--sage-700);
border-bottom-color: var(--sage-700);
}
.vn-button--ghost {
color: var(--ink-900);
}
.vn-on-dark .vn-button,
.vn-final-cta .vn-button,
.vn-on-dark .vn-button--primary,
.vn-on-dark .vn-button--ghost,
.vn-final-cta .vn-button--primary,
.vn-final-cta .vn-button--ghost {
background: transparent;
color: var(--on-dark);
border-bottom-color: var(--on-dark-muted);
}
.vn-on-dark .vn-button__hint,
.vn-final-cta .vn-button__hint {
color: var(--on-dark-muted);
}
.vn-on-dark .vn-button__sep,
.vn-final-cta .vn-button__sep {
color: var(--on-dark-muted);
}
.vn-on-dark .vn-button:hover,
.vn-on-dark .vn-button:focus-visible,
.vn-final-cta .vn-button:hover,
.vn-final-cta .vn-button:focus-visible {
color: var(--on-dark);
border-bottom-color: var(--on-dark);
background: transparent;
}
.vn-hero {
background: var(--sage-500);
padding: clamp(1rem, 2.5vw, 3rem);
margin: 0;
position: relative;
}
.vn-hero--logo {
height: 180vh;
padding: 0;
background-color: var(--sage-800);
background-image: var(--vn-grain);
background-attachment: fixed;
background-size: 360px 360px;
background-repeat: repeat;
overflow: visible;
}
.vn-hero-logo__sticky {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
padding: clamp(1rem, 2.5vw, 3rem);
overflow: hidden;
}
.vn-hero-bento__grid {
position: absolute;
inset: clamp(1rem, 2.5vw, 3rem);
z-index: 1;
--cell-h: min(70vh, 42vw);
--cell-w: calc(var(--cell-h) * 10 / 16);
--cell-gap: clamp(0.75rem, 1.8vw, 1.75rem);
}
.vn-hero-bento__cell {
position: absolute;
margin: 0;
overflow: hidden;
border-radius: 8px;
background: var(--sage-800);
box-shadow: none;
will-change: transform, opacity;
transform-origin: center;
--cell-scale: 1;
transform: scale(var(--cell-scale));
}
.vn-hero-bento__cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vn-hero-bento__cell::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg,
color-mix(in srgb, var(--sage-300) 40%, transparent) 0%,
color-mix(in srgb, var(--sage-300) 60%, transparent) 100%);
mix-blend-mode: multiply;
pointer-events: none;
}
.vn-hero-bento__cell::before {
content: "";
position: absolute;
inset: 0;
background: var(--sage-900);
mix-blend-mode: multiply;
opacity: 0.3;
pointer-events: none;
z-index: 1;
}
.vn-hero-bento__cell--2,
.vn-hero-bento__cell--3 {
top: 50%;
width: var(--cell-w);
height: var(--cell-h);
aspect-ratio: auto;
z-index: 2;
}
.vn-hero-bento__cell--2 {
left: 50%;
transform: translate(calc(-50% - var(--cell-w) - var(--cell-gap)), -50%) scale(var(--cell-scale, 1));
}
.vn-hero-bento__cell--3 {
left: 50%;
transform: translate(calc(-50% + var(--cell-w) + var(--cell-gap)), -50%) scale(var(--cell-scale, 1));
}
.vn-hero-bento__cell--1 {
top: 0; left: 0;
width: 100%; height: 100%;
aspect-ratio: auto;
z-index: 3;
border-radius: 8px;
box-shadow: none;
transform: none;
--expand: 0;
clip-path: inset(calc((100% - var(--cell-h)) / 2 * (1 - var(--expand))) calc((100% - var(--cell-w)) / 2 * (1 - var(--expand))) round 8px);
will-change: clip-path;
}
.vn-hero-bento__cell--1 img {
transform: scale(calc(1.25 - 0.25 * var(--expand, 0)));
transform-origin: center;
will-change: transform;
}
.vn-hero-bento__overlay {
display: none;
}
@media (max-width: 768px) {
.vn-hero-bento__grid {
--cell-w: min(90vw, 58vh);
--cell-h: calc(var(--cell-w) * 9 / 16);
--cell-gap: clamp(1rem, 4.5vw, 1.6rem);
}
.vn-hero-bento__cell--2 {
transform: translate(-50%, calc(-50% - var(--cell-h) - var(--cell-gap))) scale(var(--cell-scale, 1));
}
.vn-hero-bento__cell--3 {
transform: translate(-50%, calc(-50% + var(--cell-h) + var(--cell-gap))) scale(var(--cell-scale, 1));
}
.vn-hero-logo__italic,
.vn-hero-logo__mark {
font-size: clamp(2.75rem, 14vw, 5rem) !important;
}
}
.vn-hero--logo .vn-hero__box--logo {
width: 240px;
height: 80px;
border-radius: 40px;
background: var(--sage-900);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
transition: none;
will-change: width, height, border-radius;
margin: 0;
}
.vn-hero-logo__media {
position: absolute;
inset: 0;
margin: 0;
z-index: 0;
}
.vn-hero-logo__media img,
.vn-hero-logo__media .vn-hero__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vn-hero--logo .vn-hero__box--logo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15,22,18,0.45) 0%, rgba(15,22,18,0.6) 50%, rgba(15,22,18,0.7) 100%);
z-index: 1;
pointer-events: none;
}
.vn-hero-logo__inner {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1.25rem, 2.5vw, 2rem);
text-align: center;
pointer-events: none;
padding: clamp(1rem, 2.5vw, 3rem);
--logo-shift: 73px;
transform: translateY(var(--logo-shift));
transition: transform 0.15s ease-out;
will-change: transform;
}
.vn-hero-logo__inner > * { pointer-events: auto; }
.vn-hero-logo__wordmark {
position: relative;
z-index: 2;
}
.vn-hero-logo__description {
font-family: var(--font-body);
font-size: clamp(1.0625rem, 1.5vw, 1.35rem);
line-height: 1.55;
color: var(--on-dark);
margin: 0 auto;
max-width: 28rem;
text-align: center;
letter-spacing: 0;
font-weight: 400;
}
.vn-hero-logo__description .vn-italic {
color: var(--sage-300);
}
[data-section="hero-logo"] p.vn-hero-logo__description {
color: var(--on-dark);
}
.vn-hero-logo__description {
--unfold-progress: 0;
opacity: var(--unfold-progress);
transform: translateY(calc((1 - var(--unfold-progress)) * 12px));
will-change: opacity, transform;
}
.vn-hero-logo__desc-word {
display: inline-block;
}
.vn-hero-logo__cta {
--unfold-progress: 0;
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
padding: 0 0 0.5rem;
background: transparent;
border: 0;
border-bottom: 1px solid var(--paper-50);
border-radius: 0;
color: var(--paper-50);
font-family: var(--font-body);
font-size: clamp(0.95rem, 1.1vw, 1.05rem);
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
opacity: var(--unfold-progress);
transform: translateY(calc((1 - var(--unfold-progress)) * 16px));
will-change: opacity, transform;
pointer-events: auto;
transition: border-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.vn-hero-logo__cta-hint {
text-transform: uppercase;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.22em;
color: var(--paper-50);
}
.vn-hero-logo__cta-sep {
color: var(--paper-50);
}
.vn-hero-logo__cta-label {
font-weight: 500;
margin-right: 0.4rem;
}
.vn-hero-logo__cta-arrow {
display: inline-block;
font-size: 1.45em;
line-height: 1;
font-weight: 300;
color: var(--paper);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.vn-hero-logo__cta:hover {
border-bottom-color: var(--paper);
}
.vn-hero-logo__cta:hover .vn-hero-logo__cta-arrow {
transform: translateX(6px);
}
.vn-hero--logo .vn-hero-logo__award {
position: absolute;
top: auto;
left: auto;
bottom: clamp(1.5rem, 3vw, 3.5rem);
right: clamp(-4rem, -3vw, -2rem);
z-index: 6;
width: clamp(12rem, 15vw, 17rem);
height: clamp(12rem, 15vw, 17rem);
pointer-events: none;
--unfold-progress: 1;
opacity: var(--unfold-progress);
transform: scale(calc(0.6 + var(--unfold-progress) * 0.4))
rotate(calc((1 - var(--unfold-progress)) * -30deg));
transition: none;
will-change: opacity, transform;
}
.vn-hero--logo .vn-hero-logo__award .vn-hero__award-disc {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
.vn-hero--logo .vn-hero-logo__award .vn-hero__award-icon {
color: var(--paper);
}
.vn-hero--logo .vn-hero-logo__award .vn-hero__award-text text {
fill: var(--paper);
font-size: 11px;
letter-spacing: 0.3em;
}
@media (max-width: 768px) {
.vn-hero--logo .vn-hero-logo__award {
bottom: 4vw;
right: -4vw;
width: clamp(7.5rem, 32vw, 11rem);
height: clamp(7.5rem, 32vw, 11rem);
}
}
@media (prefers-reduced-motion: reduce) {
.vn-hero-logo__description,
.vn-hero-logo__cta,
.vn-hero-logo__badge,
.vn-hero--logo .vn-hero-logo__award { opacity: 1; transform: none; }
}
.vn-hero-logo__badge {
position: absolute;
bottom: clamp(2.75rem, 5.5vw, 5rem);
left: clamp(2.5rem, 5vw, 5rem);
z-index: 6;
height: clamp(3rem, 4.5vw, 4.25rem);
width: auto;
display: block;
pointer-events: none;
--unfold-progress: 0;
opacity: var(--unfold-progress);
transform: translateY(calc((1 - var(--unfold-progress)) * 12px));
will-change: opacity, transform;
}
@media (max-width: 768px) {
.vn-hero-logo__badge {
bottom: clamp(2rem, 7vw, 3rem);
left: clamp(1.75rem, 6vw, 2.5rem);
height: 2.75rem;
}
}
.vn-hero-logo__wordmark {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: clamp(0.5rem, 1.5vw, 1.75rem);
line-height: 1;
white-space: normal;
max-width: 100%;
overflow: visible;
margin: 0;
font-weight: inherit;
letter-spacing: inherit;
}
@media (max-width: 1100px) {
.vn-hero-logo__wordmark {
flex-direction: column;
align-items: center;
gap: 0.05em;
white-space: normal;
--logo-shift: 0px;
}
.vn-hero-logo__italic {
font-size: clamp(2.5rem, 13vw, 6rem);
}
.vn-hero-logo__mark {
font-size: clamp(3.5rem, 21vw, 11rem);
letter-spacing: -0.04em;
}
}
.vn-hero-logo__italic {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(2.75rem, 9vw, 9rem);
color: var(--sage-300);
letter-spacing: -0.01em;
font-variation-settings: "opsz" 120;
animation: vn-hero-logo-italic-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.vn-hero-logo__mark {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2.75rem, 9vw, 9rem);
color: var(--paper);
letter-spacing: -0.025em;
font-variation-settings: "opsz" 120;
animation: vn-hero-logo-mark-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
@keyframes vn-hero-logo-italic-in {
from { transform: translateX(-55vw); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes vn-hero-logo-mark-in {
from { transform: translateX(55vw); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.vn-hero-logo__italic,
.vn-hero-logo__mark { animation: none; transform: none; opacity: 1; }
}
.vn-hero__box {
position: relative;
width: 100%;
margin: 0 auto;
height: clamp(680px, 92vh, 980px);
overflow: visible;
border-radius: 6px;
background: var(--ink-700);
isolation: isolate;
}
.vn-hero__box > .vn-hero__media,
.vn-hero__box > .vn-hero__overlay {
border-radius: 6px;
}
.vn-hero__box > .vn-hero__media,
.vn-hero__box > .vn-hero__overlay {
overflow: hidden;
border-radius: 6px;
}
.vn-hero__media {
position: absolute;
inset: 0;
margin: 0;
z-index: 0;
}
.vn-hero__media img,
.vn-hero__media .vn-hero__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
animation: vn-hero-zoom 22s ease-out forwards;
}
@keyframes vn-hero-zoom {
from { transform: scale(1.06); }
to { transform: scale(1.0); }
}
.vn-hero__box::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 60%, rgba(161, 161, 136, 0.45) 90%, rgba(161, 161, 136, 0.65) 100%),
linear-gradient(180deg, rgba(15,22,18,0.0) 45%, rgba(15,22,18,0.25) 75%, rgba(15,22,18,0.55) 100%),
linear-gradient(180deg, rgba(15,22,18,0.18) 0%, rgba(15,22,18,0.0) 18%);
z-index: 1;
pointer-events: none;
}
.vn-hero__overlay {
position: absolute;
inset: 0;
z-index: 2;
padding: clamp(1.5rem, 4vw, 3.5rem);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
pointer-events: none;
}
.vn-hero__overlay > * { pointer-events: auto; }
.vn-hero__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
}
.vn-hero__box > .vn-hero__award {
position: absolute;
top: auto;
bottom: clamp(-1.5rem, -2.5vw, -2.5rem);
right: clamp(-1.5rem, -2.5vw, -2.5rem);
z-index: 10;
width: clamp(6rem, 8vw, 8.5rem);
height: clamp(6rem, 8vw, 8.5rem);
}
.vn-hero__bottom {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: end;
}
@media (max-width: 880px) {
.vn-hero__bottom { grid-template-columns: 1fr; gap: 1.75rem; }
}
.vn-hero__copy {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vn-hero__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.8rem;
font-weight: 600;
color: #FFFFFF;
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.7rem;
text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}
.vn-hero__eyebrow::before {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: #FFFFFF;
}
.vn-hero__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 60;
font-size: clamp(2rem, 4.5vw, 4rem);
line-height: 1.02;
letter-spacing: -0.02em;
margin: 0;
white-space: pre-line;
color: #FFFFFF;
max-width: 18ch;
text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.vn-hero__headline em,
.vn-hero__headline .vn-italic {
font-style: italic;
color: var(--sage-300);
}
.vn-hero__aside {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-start;
padding-bottom: 0.5rem;
}
.vn-hero__subline {
font-family: var(--font-display);
font-style: italic;
font-variation-settings: "opsz" 36;
font-size: clamp(1.1rem, 1.7vw, 1.4rem);
max-width: 28rem;
color: #FFFFFF;
margin: 0;
line-height: 1.45;
font-weight: 400;
text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}
.vn-hero__cta {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin: 0;
}
.vn-hero .vn-button {
border: 1.5px solid var(--paper);
background: var(--paper);
color: var(--ink-700);
backdrop-filter: saturate(180%) blur(8px);
}
.vn-hero .vn-button:hover,
.vn-hero .vn-button:focus-visible {
background: var(--sage-500);
border-color: var(--sage-500);
color: var(--paper);
}
.vn-hero .vn-button--primary {
background: var(--sage-500);
border-color: var(--sage-500);
color: var(--paper);
}
.vn-hero .vn-button--primary:hover,
.vn-hero .vn-button--primary:focus-visible {
background: var(--paper);
border-color: var(--paper);
color: var(--ink-700);
}
.vn-hero__award {
position: relative;
width: clamp(7rem, 9vw, 10rem);
height: clamp(7rem, 9vw, 10rem);
flex-shrink: 0;
}
.vn-hero__award-disc {
position: absolute;
inset: 0;
background: var(--paper);
border-radius: 50%;
box-shadow: none;
border: 0;
}
.vn-hero__award-text {
position: absolute;
inset: 0;
animation: vn-spin 26s linear infinite;
}
.vn-hero__award-text svg {
width: 100%;
height: 100%;
overflow: visible;
}
.vn-hero__award-text text {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.22em;
fill: var(--sage-700);
text-transform: uppercase;
}
.vn-hero__award-center {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
animation: vn-spin-reverse 18s linear infinite;
}
.vn-hero__award-icon {
width: 56%;
height: 56%;
color: var(--sage-700);
fill: currentColor;
}
@keyframes vn-spin {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
@keyframes vn-spin-reverse {
from { transform: rotate(0); }
to { transform: rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
.vn-hero__award-text,
.vn-hero__award-center { animation: none; }
.vn-hero__media img { animation: none; }
}
.vn-split-word {
display: inline-block;
white-space: nowrap;
}
.vn-split-space {
display: inline-block;
width: 0.25em;
}
.vn-split-char {
display: inline-block;
opacity: 0;
filter: blur(8px);
transform: translateY(0.4em);
transition: opacity 0.5s ease-out, filter 0.5s ease-out, transform 0.5s ease-out;
will-change: opacity, filter, transform;
}
.vn-split-char.is-in {
opacity: 1;
filter: blur(0);
transform: none;
}
.vn-hero__eyebrow,
.vn-hero__subline,
.vn-hero__cta {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.vn-hero.is-revealed .vn-hero__eyebrow { transition-delay: 0.2s; opacity: 1; transform: none; }
.vn-hero.is-revealed .vn-hero__subline { transition-delay: 1.4s; opacity: 1; transform: none; }
.vn-hero.is-revealed .vn-hero__cta { transition-delay: 1.6s; opacity: 1; transform: none; }
.vn-hero__award {
opacity: 0;
transform: scale(0.7) rotate(-30deg);
transition: opacity 1s cubic-bezier(0.34, 1.56, 0.64, 1),
transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vn-hero.is-revealed .vn-hero__award {
transition-delay: 1.8s;
opacity: 1;
transform: scale(1) rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
.vn-split-char,
.vn-hero__eyebrow,
.vn-hero__subline,
.vn-hero__cta,
.vn-hero__award {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}
.vn-tel-display {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 400;
color: var(--ink-900);
text-decoration: none;
display: inline-block;
transition: color 200ms ease;
}
.vn-tel-display:hover { color: var(--sage-300); }
[data-section] h2 {
max-width: 24ch;
margin-bottom: 1.25rem;
}
[data-section] p {
max-width: 60ch;
line-height: 1.6;
color: var(--ink-500);
}
.vn-hero p.vn-hero__eyebrow,
.vn-hero p.vn-hero__subline {
color: #FFFFFF;
max-width: none;
}
.vn-hero p.vn-hero__subline { max-width: 28rem; }
.vn-on-dark,
[data-section].vn-on-dark,
[data-section="final-cta"],
[data-section="muehle-zahlen"],
[data-section="award"],
[data-section="muehle-award"] {
background: var(--ink-900);
color: var(--paper);
}
[data-section].vn-on-dark h2,
[data-section].vn-on-dark h3,
[data-section="final-cta"] h2,
[data-section="final-cta"] h3,
[data-section="muehle-zahlen"] h2,
[data-section="award"] h2,
[data-section="muehle-award"] h2,
.vn-final-cta__headline,
.vn-muehle-award__title,
.vn-muehle-zahlen__inner h2 { color: var(--paper); }
[data-section].vn-on-dark p,
[data-section="final-cta"] p,
[data-section="muehle-zahlen"] p:not(.vn-muehle-zahlen__label),
[data-section="award"] p,
[data-section="muehle-award"] p { color: var(--sage-200); }
.vn-marquee {
background: var(--sage-900);
overflow: hidden;
padding: clamp(1rem, 2vw, 1.5rem) 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.vn-marquee__track {
display: flex;
gap: 2.5rem;
white-space: nowrap;
align-items: center;
animation: vn-marquee-scroll 60s linear infinite;
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.6vw, 1.4rem);
font-weight: 400;
font-variation-settings: "opsz" 32;
font-style: italic;
color: var(--sage-200);
letter-spacing: 0.02em;
line-height: 1.2;
}
.vn-marquee__item {
flex-shrink: 0;
font-style: italic;
}
.vn-marquee__sep {
display: inline-flex;
align-items: center;
color: var(--sage-500);
font-style: normal;
flex-shrink: 0;
}
.vn-marquee__muehle {
width: 1.1rem;
height: 1.1rem;
display: block;
opacity: 0.7;
}
@keyframes vn-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.vn-marquee__track { animation: none; }
}
.vn-site-footer__wordmark {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: nowrap;
gap: clamp(0.75rem, 2vw, 2rem);
margin: 0 0 clamp(3rem, 6vw, 5rem);
line-height: 1;
overflow: hidden;
white-space: nowrap;
}
.vn-site-footer__wordmark-italic {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(2.5rem, 10vw, 9rem);
color: var(--sage-300);
letter-spacing: -0.01em;
font-variation-settings: "opsz" 96;
}
.vn-site-footer__wordmark-mark {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2.5rem, 10vw, 9rem);
color: var(--paper);
letter-spacing: -0.025em;
font-variation-settings: "opsz" 96;
}
.vn-numbered-story {
padding: var(--space-section) var(--gutter);
}
.vn-numbered-story__inner {
max-width: var(--page-max);
margin: 0 auto;
}
.vn-numbered-story__header {
max-width: 44rem;
margin: 0 0 4rem;
}
.vn-numbered-story__list {
list-style: none;
padding: 0;
margin: 0;
}
.vn-numbered-story__item {
display: grid;
grid-template-columns: 6rem 1fr minmax(0, 1.1fr);
column-gap: clamp(1.5rem, 4vw, 3.5rem);
padding: clamp(2rem, 5vw, 3.5rem) 0;
border-top: 1px solid var(--bd-100);
align-items: center;
}
.vn-numbered-story__item:last-child { border-bottom: 1px solid var(--bd-100); }
@media (max-width: 760px) {
.vn-numbered-story__item {
grid-template-columns: 4rem 1fr;
grid-template-rows: auto auto;
row-gap: 1rem;
}
.vn-numbered-story__media { grid-column: 1 / -1; }
}
.vn-numbered-story__index {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.25rem);
color: var(--sage-300);
line-height: 1;
font-variation-settings: "opsz" 144;
font-style: italic;
font-variant-numeric: tabular-nums;
font-weight: 400;
}
.vn-numbered-story__copy h3 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
margin: 0 0 1rem;
}
.vn-numbered-story__copy p {
margin: 0;
font-size: 1rem;
line-height: 1.6;
}
.vn-numbered-story__media {
aspect-ratio: 5 / 4;
overflow: hidden;
background: var(--sage-100);
}
.vn-numbered-story__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 600ms ease;
}
.vn-numbered-story__media:hover img { transform: scale(1.04); }
.vn-muehle-zahlen {
background: var(--ink-900);
color: var(--paper);
padding: var(--space-section) var(--gutter);
position: relative;
overflow: hidden;
}
.vn-muehle-zahlen::before {
content: "";
position: absolute;
top: -20%; right: -10%;
width: 60%; height: 140%;
background: radial-gradient(ellipse, rgba(200,118,29,0.13) 0%, transparent 60%);
pointer-events: none;
}
.vn-muehle-zahlen__inner {
max-width: var(--page-max);
margin: 0 auto;
position: relative;
}
.vn-muehle-zahlen__header { max-width: 38rem; margin: 0 0 4rem; }
.vn-muehle-zahlen__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 2rem 3rem;
}
.vn-muehle-zahlen__item {
padding: 1.25rem 0;
border-top: 1px solid rgba(251,250,247,0.16);
}
.vn-muehle-zahlen__number {
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 4.5rem);
line-height: 1;
color: var(--sage-300);
margin: 0 0 0.6rem;
font-variation-settings: "opsz" 144;
font-variant-numeric: tabular-nums;
letter-spacing: -0.03em;
display: block;
font-weight: 400;
}
.vn-muehle-zahlen__label {
font-size: 0.95rem;
color: var(--sage-200);
margin: 0;
line-height: 1.45;
max-width: 18rem;
}
.vn-muehle-award {
background: var(--ink-900);
color: var(--paper);
padding: var(--space-section) var(--gutter);
text-align: center;
}
.vn-muehle-award__inner {
max-width: 50rem;
margin: 0 auto;
}
.vn-muehle-award__badge {
display: inline-block;
width: 6rem; height: 6rem;
border: 1.5px solid var(--sage-300);
border-radius: 50%;
margin: 0 auto 2rem;
position: relative;
}
.vn-muehle-award__badge::after {
content: "★";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--sage-300);
font-size: 2rem;
}
.vn-muehle-award__title {
font-size: clamp(2.5rem, 5vw, 4rem);
color: var(--paper);
margin: 0 0 0.5rem;
}
.vn-muehle-award__year {
font-size: 0.85rem;
color: var(--sage-300);
letter-spacing: 0.22em;
text-transform: uppercase;
display: block;
margin-bottom: 2rem;
font-family: var(--font-body);
font-weight: 600;
}
.vn-muehle-award__body {
color: var(--sage-200);
max-width: 40rem;
margin: 0 auto;
font-size: 1.05rem;
}
.vn-experience {
background: var(--sage-100);
padding: var(--space-section) var(--gutter);
}
.vn-experience__inner {
max-width: var(--page-wide);
margin: 0 auto;
}
.vn-experience__header {
max-width: 48rem;
margin: 0 0 5rem;
}
.vn-experience__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(12, 1fr);
}
.vn-experience__card {
position: relative;
overflow: hidden;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 16rem;
background: var(--paper);
border: 1px solid var(--bd-100);
isolation: isolate;
transition: transform 350ms ease;
}
.vn-experience__card:hover { transform: translateY(-3px); }
.vn-experience__card:nth-child(1) { grid-column: span 7; grid-row: span 2; min-height: 32rem; }
.vn-experience__card:nth-child(2) { grid-column: span 5; min-height: 16rem; }
.vn-experience__card:nth-child(3) { grid-column: span 5; }
.vn-experience__card:nth-child(4) { grid-column: span 4; grid-row: span 2; min-height: 32rem; }
.vn-experience__card:nth-child(5) { grid-column: span 8; }
.vn-experience__card:nth-child(6) { grid-column: span 6; }
.vn-experience__card:nth-child(7) { grid-column: span 6; }
.vn-experience__card:nth-child(8) { grid-column: span 12; min-height: 22rem; }
@media (max-width: 900px) {
.vn-experience__list { grid-template-columns: repeat(2, 1fr); }
.vn-experience__card:nth-child(n) {
grid-column: span 1;
grid-row: span 1;
min-height: 16rem;
}
.vn-experience__card:nth-child(1) { grid-column: span 2; min-height: 22rem; }
.vn-experience__card:nth-child(8) { grid-column: span 2; }
}
@media (max-width: 600px) {
.vn-experience__list { grid-template-columns: 1fr; }
.vn-experience__card:nth-child(n) { grid-column: span 1; }
}
.vn-experience__card--image {
background: var(--ink-900);
color: var(--paper);
border-color: transparent;
}
.vn-experience__card--image > * { position: relative; z-index: 2; }
.vn-experience__card--image::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--card-bg, none);
background-size: cover;
background-position: center;
z-index: 0;
transition: transform 800ms ease;
}
.vn-experience__card--image:hover::before { transform: scale(1.06); }
.vn-experience__card--image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15,31,15,0.0) 30%, rgba(15,31,15,0.85) 100%);
z-index: 1;
}
.vn-experience__card--image,
.vn-experience__card--image .vn-experience__title,
.vn-experience__card--image .vn-experience__title a,
.vn-experience__card--image .vn-experience__desc { color: var(--paper); }
.vn-experience__card--image .vn-experience__title a:hover { color: var(--sage-300); }
.vn-experience__card--image .vn-experience__accent {
background: var(--sage-300);
color: var(--paper);
}
.vn-experience__card--image .vn-experience__index { color: var(--sage-300); }
.vn-experience__card--dark {
background: var(--ink-900);
color: var(--paper);
border-color: transparent;
}
.vn-experience__card--dark .vn-experience__title,
.vn-experience__card--dark .vn-experience__title a { color: var(--paper); }
.vn-experience__card--dark .vn-experience__desc { color: var(--sage-200); }
.vn-experience__card--dark .vn-experience__accent {
background: var(--sage-300);
color: var(--paper);
}
.vn-experience__card--dark .vn-experience__index { color: var(--sage-300); }
.vn-experience__index {
font-family: var(--font-display);
font-size: 0.85rem;
letter-spacing: 0.06em;
color: var(--sage-300);
margin-bottom: auto;
font-variant-numeric: tabular-nums;
font-style: italic;
}
.vn-experience__accent {
display: inline-block;
background: var(--sage-300);
color: var(--paper);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.35rem 0.75rem;
margin-bottom: 1rem;
font-weight: 600;
align-self: flex-start;
}
.vn-experience__title {
font-size: clamp(1.5rem, 2.4vw, 2rem);
margin: 0 0 0.55rem;
font-family: var(--font-display);
line-height: 1.1;
}
.vn-experience__title a {
color: var(--ink-900);
text-decoration: none;
}
.vn-experience__title a:hover { color: var(--sage-300); }
.vn-experience__desc {
font-size: 0.95rem;
color: var(--ink-500);
line-height: 1.55;
margin: 0;
max-width: 30rem;
}
.vn-intro {
padding: clamp(6rem, 12vw, 10rem) var(--gutter);
}
[data-section="intro"] p,
[data-section="intro"] .vn-intro__body p {
color: var(--paper-50);
}
[data-section="intro"] .vn-intro__body p strong { color: var(--paper-50); }
.vn-intro__inner {
max-width: var(--page-wide);
margin: 0 auto;
}
.vn-intro__grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
column-gap: clamp(3rem, 7vw, 7rem);
align-items: start;
}
.vn-intro--flipped .vn-intro__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.vn-intro--flipped .vn-intro__col-headline {
order: 2;
}
.vn-intro--flipped .vn-intro__col-story {
order: 1;
}
@media (max-width: 960px) {
.vn-intro__grid {
grid-template-columns: 1fr;
row-gap: 2.5rem;
}
.vn-intro--flipped .vn-intro__grid {
grid-template-columns: 1fr;
}
.vn-intro--flipped .vn-intro__col-headline {
order: 1;
}
.vn-intro--flipped .vn-intro__col-story {
order: 2;
}
}
.vn-intro__col-headline {
display: flex;
flex-direction: column;
gap: clamp(1rem, 2vw, 1.5rem);
padding-top: 0.5rem;
}
.vn-intro__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2.5rem, 5.5vw, 5.25rem);
line-height: 1.0;
letter-spacing: -0.025em;
margin: 0;
color: var(--paper-50);
max-width: 14ch;
}
.vn-intro__image-wrap {
margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
width: 100%;
max-width: 100%;
border-radius: 6px;
overflow: hidden;
background: transparent;
position: relative;
}
.vn-intro__image {
width: 100%;
height: auto;
display: block;
transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vn-intro__image-wrap:hover .vn-intro__image {
transform: scale(1.04);
}
.vn-intro__col-story {
display: flex;
flex-direction: column;
gap: 2rem;
padding-top: 1.5rem;
max-width: 32rem;
}
.vn-intro__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--paper-50);
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-intro__eyebrow::before {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--paper-50);
}
.vn-intro__body {
font-family: var(--font-body);
font-size: 1.2rem;
line-height: 1.7;
color: var(--paper-50);
max-width: 32rem;
}
.vn-intro__body p { margin: 0 0 1.2em; }
.vn-intro__body p:last-child { margin-bottom: 0; }
.vn-intro__cta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
color: var(--paper-50);
text-decoration: none;
border-bottom: 1.5px solid var(--paper-50);
padding-bottom: 0.35rem;
width: fit-content;
transition: color 240ms ease, border-color 240ms ease, gap 240ms ease;
}
.vn-intro__cta:hover,
.vn-intro__cta:focus-visible {
color: var(--sage-900);
border-color: var(--sage-900);
gap: 0.9rem;
}
.vn-intro__cta-arrow {
display: inline-block;
transition: transform 240ms ease;
}
.vn-intro__cta:hover .vn-intro__cta-arrow {
transform: translateX(3px);
}
.vn-services {
padding: clamp(6rem, 12vw, 10rem) var(--gutter);
}
.vn-services__inner {
max-width: var(--page-wide);
margin: 0 auto;
}
.vn-services__header {
max-width: 50rem;
margin: 0 auto 4.5rem;
text-align: center;
}
.vn-services__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--sage-600);
margin: 0 0 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-services__eyebrow::before,
.vn-services__eyebrow::after {
content: "";
display: inline-block;
width: 2rem;
height: 1px;
background: var(--sage-500);
}
.vn-services__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2.25rem, 5vw, 4.5rem);
line-height: 1.0;
letter-spacing: -0.025em;
margin: 0 auto 1rem;
color: var(--sage-900);
max-width: 22ch;
text-wrap: balance;
}
.vn-services__subline {
font-family: var(--font-body);
font-size: clamp(1rem, 1.5vw, 1.15rem);
color: var(--sage-700);
max-width: 38rem;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
line-height: 1.55;
}
.vn-services__switcher {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(2rem, 4vw, 4rem);
align-items: stretch;
}
@media (max-width: 960px) {
.vn-services__switcher { grid-template-columns: 1fr; }
}
.vn-services__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.vn-services__item {
border-top: 1px solid var(--sage-300);
cursor: pointer;
transition: padding 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vn-services__item:last-child {
border-bottom: 1px solid var(--sage-300);
}
.vn-services__item-inner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1.25rem;
align-items: center;
padding: 1.4rem 0.5rem;
transition: padding 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vn-services__item.is-active .vn-services__item-inner {
padding: 1.65rem 0.5rem;
}
.vn-services__index {
font-family: var(--font-display);
font-style: italic;
font-variation-settings: "opsz" 36;
font-size: clamp(1.5rem, 2.4vw, 1.8rem);
font-weight: 400;
color: var(--sage-500);
line-height: 1;
font-variant-numeric: tabular-nums;
transition: color 350ms ease;
min-width: 2.5em;
}
.vn-services__item.is-active .vn-services__index {
color: var(--sage-900);
}
.vn-services__item-body {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.vn-services__item-title {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 60;
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
line-height: 1.1;
letter-spacing: -0.015em;
margin: 0;
color: var(--sage-900);
}
.vn-services__item-title a {
color: inherit;
text-decoration: none;
}
.vn-services__item-desc {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.5;
color: var(--sage-700);
margin: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms ease 80ms, margin-top 300ms ease;
}
.vn-services__item.is-active .vn-services__item-desc {
max-height: 6em;
opacity: 1;
margin-top: 0.35rem;
}
.vn-services__item-accent {
display: inline-block;
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sage-600);
margin-top: 0.5rem;
font-weight: 600;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 350ms ease, opacity 350ms ease 120ms;
}
.vn-services__item.is-active .vn-services__item-accent {
max-height: 2em;
opacity: 1;
}
.vn-services__item-arrow {
color: var(--sage-500);
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--sage-300);
border-radius: 50%;
transition: background 280ms ease, color 280ms ease, border-color 280ms ease, transform 280ms ease;
flex-shrink: 0;
text-decoration: none;
}
.vn-services__item-arrow svg {
width: 1.05rem;
height: 1.05rem;
}
.vn-services__item:hover .vn-services__item-arrow,
.vn-services__item.is-active .vn-services__item-arrow {
background: var(--sage-900);
border-color: var(--sage-900);
color: var(--paper);
transform: rotate(-25deg);
}
.vn-services__media {
position: relative;
width: 100%;
min-height: clamp(420px, 60vh, 660px);
overflow: hidden;
border-radius: 6px;
background: var(--sage-200);
}
.vn-services__photo {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
visibility: hidden;
transform: scale(1.04);
transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
visibility 700ms;
will-change: opacity, transform;
}
.vn-services__photo.is-active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.vn-services__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vn-services__photo-label {
position: absolute;
bottom: 1.5rem;
left: 1.5rem;
background: rgba(15, 22, 18, 0.55);
backdrop-filter: blur(4px);
color: var(--paper);
padding: 0.55rem 1rem;
border-radius: 6px;
font-family: var(--font-body);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 600;
}
.vn-stats {
background: transparent;
padding: clamp(2rem, 4vw, 3rem) 0 0;
margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.vn-stats__grid {
max-width: var(--page-wide);
margin: 0 auto;
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
@media (max-width: 880px) {
.vn-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.vn-stats__grid { grid-template-columns: 1fr; }
}
.vn-stats__item {
display: flex;
flex-direction: column;
gap: 0.7rem;
padding: 0.25rem clamp(1rem, 2.5vw, 2.25rem);
border-right: 1px solid rgba(251, 250, 246, 0.22);
text-align: left;
}
.vn-stats__item:last-child { border-right: 0; }
@media (max-width: 880px) {
.vn-stats__item {
padding: 1.5rem 1rem;
}
.vn-stats__item:nth-child(2n) { border-right: 0; }
.vn-stats__item:nth-child(-n+2) { border-bottom: 1px solid rgba(251, 250, 246, 0.22); }
}
@media (max-width: 480px) {
.vn-stats__item {
border-right: 0 !important;
border-bottom: 1px solid rgba(251, 250, 246, 0.22) !important;
}
.vn-stats__item:last-child { border-bottom: 0 !important; }
}
.vn-stats__value-wrap {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
white-space: nowrap;
}
.vn-stats__value {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2.75rem, 5vw, 4.25rem);
line-height: 1;
letter-spacing: -0.035em;
color: var(--paper-50);
font-variant-numeric: tabular-nums;
display: inline-block;
}
.vn-stats__suffix {
font-family: var(--font-display);
font-style: italic;
font-variation-settings: "opsz" 24;
font-size: clamp(0.95rem, 1.4vw, 1.2rem);
color: rgba(251, 250, 246, 0.78);
line-height: 1;
}
.vn-stats__label {
font-family: var(--font-body);
font-size: 0.82rem;
color: rgba(251, 250, 246, 0.78);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.01em;
}
.vn-intro__quote {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.4rem, 2.4vw, 1.85rem);
line-height: 1.3;
color: var(--sage-900);
border-left: 2px solid var(--sage-500);
padding: 0.25rem 0 0.25rem 1.75rem;
margin: 0;
}
.vn-restaurant-klassiker__list {
list-style: none; padding: 0; margin: 3rem 0 0;
display: grid; gap: 0;
}
.vn-restaurant-klassiker__item {
background: transparent;
border: 0;
border-top: 1px solid var(--bd-100);
padding: 1.5rem 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: baseline;
}
.vn-restaurant-klassiker__item:last-child { border-bottom: 1px solid var(--bd-100); }
.vn-restaurant-klassiker__cat {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--sage-300);
display: inline-block;
margin-bottom: 0.4rem;
font-weight: 600;
}
.vn-restaurant-klassiker__name {
font-size: clamp(1.25rem, 2vw, 1.6rem);
margin: 0 0 0.4rem;
font-family: var(--font-display);
}
.vn-restaurant-klassiker__badge {
display: inline-block;
color: var(--sage-300);
font-size: 0.85rem;
margin-left: 0.5rem;
vertical-align: middle;
}
.vn-restaurant-klassiker__beschr { font-size: 0.95rem; color: var(--ink-500); margin: 0; max-width: 30rem; }
.vn-restaurant-klassiker__preis {
font-weight: 400;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
font-variant-numeric: tabular-nums;
}
.vn-restaurant-klassiker__aller {
font-size: 0.75rem;
color: var(--ink-300);
margin-top: 0.5rem;
display: block;
letter-spacing: 0.06em;
}
.vn-speisekarte__group { margin-bottom: 4rem; }
.vn-speisekarte__cat {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.5rem);
color: var(--ink-900);
margin: 0 0 2rem;
letter-spacing: -0.02em;
font-style: italic;
}
.vn-speisekarte__list { list-style: none; padding: 0; margin: 0; }
.vn-speisekarte__item {
padding: 1.25rem 0;
border-top: 1px solid var(--bd-100);
}
.vn-speisekarte__item:last-child { border-bottom: 1px solid var(--bd-100); }
.vn-speisekarte__item-head {
display: flex;
justify-content: space-between;
gap: 2rem;
align-items: baseline;
}
.vn-speisekarte__name {
margin: 0;
font-size: 1.2rem;
font-family: var(--font-display);
}
.vn-speisekarte__badge { color: var(--sage-300); margin-left: 0.4rem; }
.vn-speisekarte__preis {
font-weight: 400;
color: var(--ink-900);
white-space: nowrap;
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-size: 1.2rem;
}
.vn-speisekarte__desc { font-size: 0.95rem; margin: 0.35rem 0 0; color: var(--ink-500); }
.vn-speisekarte__aller {
font-size: 0.75rem;
color: var(--ink-300);
letter-spacing: 0.06em;
margin-top: 0.35rem;
display: block;
}
.vn-feiern-raeume__list {
list-style: none; padding: 0; margin: 3rem 0 0;
display: grid; gap: 0;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) { .vn-feiern-raeume__list { grid-template-columns: 1fr; } }
.vn-feiern-raeume__card {
background: var(--paper);
border: 0;
padding: 2.5rem 2rem;
border-top: 1px solid var(--bd-100);
border-right: 1px solid var(--bd-100);
transition: background 250ms ease;
}
.vn-feiern-raeume__card:last-child { border-right: 0; }
@media (max-width: 880px) { .vn-feiern-raeume__card { border-right: 0; } }
.vn-feiern-raeume__card:hover { background: var(--sage-100); }
.vn-feiern-raeume__name {
font-size: clamp(1.5rem, 2.5vw, 2rem);
margin: 1rem 0 1rem;
font-family: var(--font-display);
}
.vn-feiern-raeume__meta {
display: flex; flex-wrap: wrap; gap: 1.5rem;
margin: 2rem 0 1rem;
padding-top: 1.5rem;
border-top: 1px solid var(--bd-100);
}
.vn-feiern-raeume__meta dt {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-300);
font-weight: 600;
}
.vn-feiern-raeume__meta dd {
margin: 0.25rem 0 0;
font-weight: 400;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 1.15rem;
}
.vn-feiern-events__list {
list-style: none; padding: 0;
display: grid; gap: 0;
margin-top: 3rem;
}
.vn-feiern-events__item {
padding: 1.25rem 0;
border-top: 1px solid var(--bd-100);
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2rem;
}
.vn-feiern-events__item:last-child { border-bottom: 1px solid var(--bd-100); }
.vn-feiern-events__item h4 {
margin: 0;
font-family: var(--font-display);
font-size: 1.15rem;
color: var(--ink-900);
}
.vn-uebernachten-options__list {
list-style: none; padding: 0;
display: grid; gap: 0;
grid-template-columns: repeat(3, 1fr);
margin: 3rem 0 0;
}
@media (max-width: 880px) { .vn-uebernachten-options__list { grid-template-columns: 1fr; } }
.vn-uebernachten-options__card {
background: var(--paper);
border: 0;
padding: 2.5rem 2rem;
border-top: 1px solid var(--bd-100);
border-right: 1px solid var(--bd-100);
transition: background 250ms ease;
}
.vn-uebernachten-options__card:last-child { border-right: 0; }
.vn-uebernachten-options__card:hover { background: var(--sage-100); }
.vn-uebernachten-options__title {
font-size: clamp(1.5rem, 2.5vw, 2rem);
margin: 0.5rem 0;
font-family: var(--font-display);
}
.vn-uebernachten-options__title a { color: var(--ink-900); text-decoration: none; }
.vn-uebernachten-options__title a:hover { color: var(--sage-300); }
.vn-uebernachten-options__meta {
display: flex; gap: 2rem;
margin: 2rem 0 0;
padding-top: 1.5rem;
border-top: 1px solid var(--bd-100);
}
.vn-uebernachten-options__meta dt {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-300);
font-weight: 600;
}
.vn-uebernachten-options__meta dd {
margin: 0.25rem 0 0;
font-weight: 400;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 1.1rem;
}
[class*="__stats"]:not(.vn-muehle-zahlen__grid) {
display: grid; gap: 0;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
margin: 2rem 0;
padding: 0;
background: transparent;
border-top: 1px solid var(--bd-100);
border-bottom: 1px solid var(--bd-100);
}
[class*="__stats"]:not(.vn-muehle-zahlen__grid) > div,
[class*="__stats"]:not(.vn-muehle-zahlen__grid) > li {
padding: 1.25rem 1.5rem;
border-right: 1px solid var(--bd-100);
}
[class*="__stats"]:not(.vn-muehle-zahlen__grid) > :last-child { border-right: 0; }
[class*="__stats"]:not(.vn-muehle-zahlen__grid) dt {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-300);
margin: 0 0 0.35rem;
font-weight: 600;
}
[class*="__stats"]:not(.vn-muehle-zahlen__grid) dd {
margin: 0;
font-size: 1.4rem;
font-weight: 400;
color: var(--ink-900);
font-family: var(--font-display);
}
.vn-zimmer-grid__list, .vn-tinyhouses-grid__list {
list-style: none; padding: 0;
display: grid; gap: 0;
grid-template-columns: repeat(3, 1fr);
margin: 3rem 0 0;
}
@media (max-width: 880px) {
.vn-zimmer-grid__list, .vn-tinyhouses-grid__list { grid-template-columns: 1fr; }
}
.vn-zimmer-grid__card, .vn-tinyhouses-grid__card {
background: var(--paper);
border: 0;
padding: 2.5rem 2rem;
border-top: 1px solid var(--bd-100);
border-right: 1px solid var(--bd-100);
}
.vn-zimmer-grid__card:last-child, .vn-tinyhouses-grid__card:last-child { border-right: 0; }
.vn-zimmer-grid__meta, .vn-tinyhouses-grid__meta {
display: flex; gap: 1.5rem; margin-top: 1.5rem;
padding-top: 1rem; border-top: 1px solid var(--bd-100);
}
.vn-zimmer-grid__meta dt, .vn-tinyhouses-grid__meta dt {
font-size: 0.7rem;
text-transform: uppercase;
color: var(--ink-300);
letter-spacing: 0.12em;
font-weight: 600;
}
.vn-zimmer-grid__meta dd, .vn-tinyhouses-grid__meta dd {
margin: 0.25rem 0 0;
font-weight: 400;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 1.05rem;
}
.vn-kreuzschuster-ausstattung__list {
list-style: none; padding: 0; margin: 2rem 0 0;
display: grid; gap: 0;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.vn-kreuzschuster-ausstattung__item {
padding: 0.85rem 1.25rem;
background: var(--sage-100);
font-size: 0.95rem;
color: var(--ink-700);
border-right: 1px solid var(--bd-100);
}
.vn-kreuzschuster-preise__list {
margin: 2rem 0;
border-top: 1px solid var(--bd-100);
border-bottom: 1px solid var(--bd-100);
}
.vn-kreuzschuster-preise__row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 1rem 0;
border-bottom: 1px solid var(--bd-100);
}
.vn-kreuzschuster-preise__row:last-child { border-bottom: 0; }
.vn-kreuzschuster-preise__row dt { color: var(--ink-700); }
.vn-kreuzschuster-preise__row dd {
margin: 0;
font-weight: 400;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 1.1rem;
font-variant-numeric: tabular-nums;
}
.vn-fischen-arten__list {
list-style: none; padding: 0;
display: grid; gap: 0;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
margin: 2.5rem 0;
border-top: 1px solid var(--bd-100);
border-bottom: 1px solid var(--bd-100);
}
.vn-fischen-arten__item {
padding: 1.75rem 1.25rem;
background: transparent;
text-align: center;
border-right: 1px solid var(--bd-100);
font-family: var(--font-display);
color: var(--ink-900);
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
font-style: italic;
transition: background 250ms ease;
}
.vn-fischen-arten__item:last-child { border-right: 0; }
.vn-fischen-arten__item:hover { background: var(--sage-100); color: var(--sage-300); }
.vn-familie-timeline {
padding: var(--space-section) var(--gutter);
}
.vn-familie-timeline__list { list-style: none; padding: 0; margin: 3rem 0 0; }
.vn-familie-timeline__item {
display: grid;
grid-template-columns: 8rem 1fr;
grid-template-rows: auto auto;
column-gap: clamp(1.5rem, 4vw, 3rem);
row-gap: 0.5rem;
padding: 1.75rem 0;
border-top: 1px solid var(--bd-100);
align-items: baseline;
}
.vn-familie-timeline__item:last-child { border-bottom: 1px solid var(--bd-100); }
.vn-familie-timeline__jahr {
grid-row: 1 / 3;
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.5rem);
color: var(--sage-300);
font-style: italic;
font-variation-settings: "opsz" 144;
font-variant-numeric: tabular-nums;
font-weight: 400;
}
.vn-familie-timeline__event {
grid-column: 2;
font-size: clamp(1.25rem, 2vw, 1.5rem);
margin: 0;
font-family: var(--font-display);
color: var(--ink-900);
line-height: 1.2;
}
.vn-familie-timeline__body {
grid-column: 2;
margin: 0;
max-width: 56ch;
color: var(--ink-500);
}
@media (max-width: 580px) {
.vn-familie-timeline__item {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
}
.vn-familie-timeline__jahr { grid-row: 1; }
.vn-familie-timeline__event,
.vn-familie-timeline__body { grid-column: 1; }
}
.vn-familie-team__list {
list-style: none; padding: 0;
display: grid; gap: 0;
grid-template-columns: repeat(3, 1fr);
margin: 4rem 0 0;
}
@media (max-width: 880px) { .vn-familie-team__list { grid-template-columns: 1fr; } }
.vn-familie-team__card {
background: var(--paper);
padding: 2.5rem 2rem;
border-top: 1px solid var(--bd-100);
border-right: 1px solid var(--bd-100);
}
.vn-familie-team__card:last-child { border-right: 0; }
.vn-familie-team__rolle {
font-size: 0.7rem;
color: var(--sage-300);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
margin-bottom: 0.5rem;
display: block;
}
.vn-familie-team__zitat {
font-family: var(--font-display);
font-style: italic;
color: var(--ink-900);
border-left: 2px solid var(--sage-300);
padding: 0.5rem 0 0.5rem 1.25rem;
margin: 1.5rem 0 0;
font-size: 1.05rem;
line-height: 1.4;
}
.vn-kontakt-info__list { margin: 2rem 0; }
.vn-kontakt-info__row {
display: grid; grid-template-columns: 1fr 2fr; gap: 2rem;
padding: 1.25rem 0;
border-top: 1px solid var(--bd-100);
align-items: baseline;
}
.vn-kontakt-info__row:last-child { border-bottom: 1px solid var(--bd-100); }
.vn-kontakt-info__row dt {
color: var(--ink-300);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
}
.vn-kontakt-info__row dd {
margin: 0;
color: var(--ink-900);
font-weight: 400;
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.8vw, 1.4rem);
}
.vn-kontakt-info__row a { color: var(--sage-300); text-decoration: none; }
.vn-kontakt-info__row a:hover { text-decoration: underline; }
.vn-kontakt-info__hint {
margin-top: 2rem;
padding: 1.5rem 1.75rem;
background: var(--sage-100);
border-left: 2px solid var(--sage-300);
font-size: 0.95rem;
color: var(--ink-500);
}
.vn-final-cta {
background: var(--sage-950);
color: var(--paper);
text-align: center;
padding: clamp(7rem, 12vw, 9rem) var(--gutter);
position: relative;
}
.vn-final-cta::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top, rgba(200,118,29,0.15) 0%, transparent 65%);
pointer-events: none;
}
.vn-final-cta__inner { position: relative; max-width: 44rem; margin: 0 auto; }
.vn-final-cta__headline {
color: var(--paper);
margin: 0 0 1rem;
}
.vn-final-cta__eyebrow { color: var(--on-dark-muted); }
.vn-final-cta p { color: var(--sage-200); max-width: 38rem; margin: 0 auto 2.5rem; }
.vn-lageplan__map iframe {
width: 100%;
aspect-ratio: 16/9;
border: 1px solid var(--bd-100);
}
.vn-galerie__list {
list-style: none; padding: 0;
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.vn-galerie__item {
aspect-ratio: 4 / 5;
overflow: hidden;
}
.vn-galerie__item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 600ms ease;
}
.vn-galerie__item:hover img { transform: scale(1.05); }
.vn-site-header {
position: fixed;
top: clamp(0.75rem, 1.5vw, 1.5rem);
left: 0; right: 0;
z-index: 50;
background: transparent;
padding: 0 var(--gutter);
transition: top 300ms ease;
}
.vn-site-header.is-scrolled { top: 0.75rem; }
.vn-site-header__wrap {
max-width: fit-content;
margin: 0 auto;
display: flex;
align-items: center;
gap: 0.75rem;
}
.vn-site-header__inner {
display: flex;
align-items: center;
gap: clamp(1.25rem, 3vw, 2.5rem);
padding: 0.65rem 1.5rem;
border: 0;
border-radius: 6px;
background-color: var(--sage-800);
background-image: var(--vn-grain);
background-size: 240px 240px;
background-repeat: repeat;
transition: background-color 300ms ease;
}
.vn-site-header.is-scrolled .vn-site-header__inner {
background-image: none;
}
.vn-site-header.is-scrolled .vn-site-header__inner {
background: var(--paper);
border-color: var(--paper);
}
.vn-site-header__brand { flex: 0 0 auto; }
.vn-site-header__title {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--paper);
letter-spacing: -0.01em;
text-decoration: none;
line-height: 1;
transition: color 300ms ease;
}
.vn-site-header__title-italic {
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 36;
color: var(--sage-300);
}
.vn-site-header__title-mark {
font-weight: 700;
font-style: normal;
font-variation-settings: "opsz" 60;
letter-spacing: -0.015em;
}
.vn-site-header.is-scrolled .vn-site-header__title { color: var(--sage-700); }
.vn-site-header.is-scrolled .vn-site-header__title-italic { color: var(--sage-700); }
.vn-site-nav {
flex: 0 0 auto;
display: flex;
justify-content: center;
}
.vn-site-nav__list {
display: flex;
gap: clamp(0.8rem, 2vw, 1.85rem);
list-style: none;
margin: 0;
padding: 0.6rem 1.5rem;
align-items: center;
}
.vn-site-nav__list li { position: relative; }
.vn-site-nav__list a {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--paper);
text-decoration: none;
padding: 0.5rem 0;
transition: color 240ms ease;
display: inline-block;
position: relative;
}
.vn-site-header.is-scrolled .vn-site-nav__list a { color: var(--ink-700); }
.vn-site-header.is-scrolled .vn-site-header__tel {
background: var(--sage-500);
color: var(--paper);
}
.vn-site-header.is-scrolled .vn-site-header__tel:hover {
background: var(--ink-700);
color: var(--paper);
}
.vn-site-header.is-scrolled .vn-site-header__inner {
padding: 0.4rem 0.4rem 0.4rem 1.15rem;
gap: clamp(1rem, 2.5vw, 2rem);
}
.vn-site-header.is-scrolled .vn-site-header__title {
font-size: 1.15rem;
}
.vn-site-header.is-scrolled .vn-site-nav__list a {
font-size: 0.85rem;
}
.vn-site-header.is-scrolled .vn-site-header__tel {
width: 2.15rem;
height: 2.15rem;
}
.vn-site-header.is-scrolled .vn-site-header__tel-icon {
width: 1rem;
height: 1rem;
}
.vn-site-header__title { transition: color 300ms ease, font-size 300ms ease; }
.vn-site-nav__list a { transition: color 240ms ease, font-size 300ms ease; }
.vn-site-nav__list a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--sage-300);
transform: scaleX(0);
transform-origin: left;
transition: transform 280ms ease;
}
.vn-site-nav__list a:hover,
.vn-site-nav__list .current-menu-item > a,
.vn-site-nav__list .current-menu-ancestor > a { color: var(--sage-300); opacity: 1; }
.vn-site-header.is-scrolled .vn-site-nav__list a:hover,
.vn-site-header.is-scrolled .vn-site-nav__list .current-menu-item > a,
.vn-site-header.is-scrolled .vn-site-nav__list .current-menu-ancestor > a { color: var(--ink-700); }
.vn-site-nav__list a:hover::after,
.vn-site-nav__list .current-menu-item > a::after,
.vn-site-nav__list .current-menu-ancestor > a::after { transform: scaleX(1); }
.vn-site-nav__list .sub-menu {
position: absolute;
top: 100%;
left: -1rem;
min-width: 14rem;
background: var(--paper);
border: 1px solid var(--bd-100);
padding: 0.5rem;
margin: 0;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
border: 1px solid rgba(45, 53, 48, 0.08);
z-index: 60;
}
.vn-site-nav__list li:hover > .sub-menu,
.vn-site-nav__list li:focus-within > .sub-menu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.vn-site-nav__list .sub-menu a {
display: block;
padding: 0.55rem 0.85rem;
font-size: 0.88rem;
color: var(--ink-700);
}
.vn-site-nav__list .sub-menu a::after { display: none; }
.vn-site-nav__list .sub-menu a:hover {
color: var(--ink-900);
background: var(--sage-100);
}
.vn-floating-tel {
position: fixed;
left: 50%;
bottom: clamp(1rem, 2.5vw, 1.5rem);
z-index: 90;
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
background: color-mix(in srgb, var(--sage-900) 82%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--paper-50);
text-decoration: none;
font-family: var(--font-body);
border: 0;
border-radius: 14px;
white-space: nowrap;
transform: translateX(-50%);
transition: background 240ms ease, transform 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease;
will-change: transform;
}
.vn-floating-tel:not(.is-ready),
.vn-floating-tel.is-hidden {
transform: translateX(-50%) translateY(calc(100% + clamp(1rem, 2.5vw, 1.5rem) + 1.5rem));
opacity: 0;
pointer-events: none;
}
.vn-floating-tel svg {
width: 1rem;
height: 1rem;
margin-left: 0.15rem;
transform-origin: 50% 30%;
animation: vn-phone-ring 4.5s ease-in-out infinite;
}
.vn-floating-tel:hover,
.vn-floating-tel:focus-visible {
background: color-mix(in srgb, var(--sage-900) 95%, transparent);
transform: translateX(-50%) translateY(-2px);
box-shadow: none;
}
.vn-floating-tel__hint {
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: color-mix(in srgb, var(--paper-50) 72%, transparent);
}
.vn-floating-tel__sep {
color: color-mix(in srgb, var(--paper-50) 35%, transparent);
font-size: 0.95rem;
margin: 0 -0.15rem;
}
.vn-floating-tel__num {
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
@media (min-width: 901px) {
.vn-floating-tel {
display: none;
}
}
@keyframes vn-phone-ring {
0%, 65%, 100% { transform: rotate(0); }
68%, 76%, 84% { transform: rotate(-13deg); }
72%, 80%, 88% { transform: rotate(13deg); }
92% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
.vn-site-header__tel-icon { animation: none; }
}
.vn-site-header__tel:hover,
.vn-site-header__tel:focus-visible {
background: var(--sage-700);
border-color: var(--sage-700);
color: var(--paper);
}
.vn-site-header__tel-icon { font-size: 0.85em; }
.vn-site-header__toggle {
display: none;
flex: 0 0 auto;
width: 2.5rem; height: 2.5rem;
background: transparent;
border: 0;
cursor: pointer;
padding: 0.5rem;
flex-direction: column;
gap: 8px;
justify-content: center;
align-items: center;
}
.vn-site-header__toggle-line {
display: block;
width: 1.5rem;
height: 2px;
background: var(--paper-50);
transition: background 300ms ease;
}
.vn-site-header.is-scrolled .vn-site-header__toggle-line {
background: var(--sage-900);
}
:root {
--vn-drawer-w: min(22rem, 88vw);
--vn-drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
--vn-drawer-dur: 460ms;
}
.vn-mobile-nav__overlay {
position: fixed;
inset: 0;
background: rgba(15, 31, 15, 0.55);
backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity var(--vn-drawer-dur) ease;
z-index: 199;
}
body.has-nav-open .vn-mobile-nav__overlay {
opacity: 1;
pointer-events: auto;
}
.vn-mobile-nav {
position: fixed;
top: 0;
right: 0;
width: 100vw;
height: 100dvh;
background-color: var(--sage-700);
background-image: var(--vn-grain);
background-size: 360px 360px;
background-repeat: repeat;
color: var(--on-dark);
transform: translateX(100%);
transition: transform var(--vn-drawer-dur) var(--vn-drawer-ease);
z-index: 200;
overflow-y: auto;
overscroll-behavior: contain;
}
body.has-nav-open .vn-mobile-nav {
transform: translateX(0);
}
.vn-mobile-nav__inner {
padding: clamp(3.5rem, 10vh, 6rem) clamp(1.5rem, 6vw, 3.5rem) clamp(2rem, 5vh, 3rem);
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 100%;
gap: clamp(1.25rem, 3vh, 2rem);
}
.vn-mobile-nav__close {
position: absolute;
top: 0.85rem;
right: 0.85rem;
background: transparent;
border: 0;
color: var(--on-dark-strong);
cursor: pointer;
width: 3.5rem;
height: 3.5rem;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: color 220ms ease, transform 280ms ease;
}
.vn-mobile-nav__close svg {
width: 100%;
height: 100%;
display: block;
}
.vn-mobile-nav__close:hover {
color: var(--sage-300);
transform: rotate(90deg);
}
.vn-mobile-nav__list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
}
.vn-mobile-nav__list > li {
padding: 0.15rem 0;
opacity: 0;
transform: translateY(-22px);
transition: opacity 360ms ease, transform 520ms var(--vn-drawer-ease);
}
body.has-nav-open .vn-mobile-nav__list > li {
opacity: 1;
transform: translateY(0);
}
body.has-nav-open .vn-mobile-nav__list > li:nth-child(1) { transition-delay: 200ms; }
body.has-nav-open .vn-mobile-nav__list > li:nth-child(2) { transition-delay: 270ms; }
body.has-nav-open .vn-mobile-nav__list > li:nth-child(3) { transition-delay: 340ms; }
body.has-nav-open .vn-mobile-nav__list > li:nth-child(4) { transition-delay: 410ms; }
body.has-nav-open .vn-mobile-nav__list > li:nth-child(5) { transition-delay: 480ms; }
body.has-nav-open .vn-mobile-nav__list > li:nth-child(6) { transition-delay: 550ms; }
body.has-nav-open .vn-mobile-nav__list > li:nth-child(7) { transition-delay: 620ms; }
body.has-nav-open .vn-mobile-nav__list > li:nth-child(n+8) { transition-delay: 690ms; }
body.has-nav-open .vn-mobile-nav__tel { transition-delay: 720ms; }
.vn-mobile-nav__list > li {
padding: 0.95rem 0 1.05rem;
border-bottom: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}
.vn-mobile-nav__list > li:last-child {
border-bottom: 0;
}
.vn-mobile-nav__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
}
.vn-mobile-nav__list > li > a,
.vn-mobile-nav__row > a {
display: block;
padding: 0;
font-family: var(--font-display);
font-size: clamp(1.75rem, 7vw, 3rem);
color: var(--on-dark-strong);
text-decoration: none;
font-style: italic;
font-variation-settings: "opsz" 144;
line-height: 1.1;
letter-spacing: -0.01em;
transition: color 220ms ease;
}
.vn-mobile-nav__list > li > a:hover,
.vn-mobile-nav__row > a:hover {
color: var(--sage-300);
}
.vn-mobile-nav__sub-toggle {
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
background: transparent;
border: 0;
padding: 0;
color: var(--on-dark-strong);
cursor: pointer;
position: relative;
transition: color 220ms ease;
}
.vn-mobile-nav__sub-toggle::before,
.vn-mobile-nav__sub-toggle::after {
content: "";
position: absolute;
background: currentColor;
border-radius: 1px;
}
.vn-mobile-nav__sub-toggle::before {
top: 50%;
left: 0;
right: 0;
height: 1.5px;
transform: translateY(-50%);
}
.vn-mobile-nav__sub-toggle::after {
left: 50%;
top: 0;
bottom: 0;
width: 1.5px;
transform: translateX(-50%);
transition: transform 320ms var(--vn-drawer-ease);
transform-origin: center;
}
.vn-mobile-nav__sub-toggle:hover {
color: var(--sage-300);
}
.menu-item-has-children.is-open .vn-mobile-nav__sub-toggle {
color: var(--sage-300);
}
.menu-item-has-children.is-open .vn-mobile-nav__sub-toggle::after {
transform: translateX(-50%) scaleY(0);
}
.vn-mobile-nav__list .sub-menu {
list-style: none;
padding: 0;
margin: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 380ms var(--vn-drawer-ease), opacity 280ms ease;
}
.menu-item-has-children.is-open > .sub-menu {
max-height: 24rem;
opacity: 1;
}
.vn-mobile-nav__list .sub-menu li {
padding: 0.25rem 0 0.25rem 1.75rem;
border-bottom: 1px solid color-mix(in srgb, var(--paper) 10%, transparent);
}
.vn-mobile-nav__list .sub-menu li:first-child {
padding-top: 0.85rem;
border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent);
margin-top: 0.6rem;
}
.vn-mobile-nav__list .sub-menu li:last-child {
border-bottom: 0;
padding-bottom: 0.5rem;
}
.vn-mobile-nav__list .sub-menu a {
display: inline-block;
font-family: var(--font-display);
font-size: clamp(1.3rem, 4.8vw, 2rem);
padding: 0.15rem 0;
color: var(--on-dark);
text-decoration: none;
font-style: italic;
font-variation-settings: "opsz" 144;
line-height: 1.05;
letter-spacing: -0.01em;
transition: color 200ms ease;
}
.vn-mobile-nav__list .sub-menu a:hover {
color: var(--sage-300);
}
.vn-mobile-nav__cta-wrap {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
padding: 2rem 0;
}
.vn-mobile-nav__wordmark {
opacity: 0;
transform: translateY(-22px);
transition: opacity 420ms ease, transform 520ms var(--vn-drawer-ease);
align-self: flex-start;
display: inline-flex;
align-items: baseline;
gap: 0.3rem;
text-decoration: none;
font-family: var(--font-display);
font-size: clamp(1.4rem, 4.5vw, 1.8rem);
line-height: 1;
color: var(--on-dark-strong);
letter-spacing: -0.015em;
margin-top: auto;
padding-top: clamp(2.5rem, 6vh, 4rem);
}
body.has-nav-open .vn-mobile-nav__wordmark {
opacity: 1;
transform: translateY(0);
transition-delay: 800ms;
}
.vn-mobile-nav__wordmark:hover {
opacity: 0.85;
}
.vn-mobile-nav__wordmark-italic {
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 60;
color: var(--sage-300);
}
.vn-mobile-nav__wordmark-mark {
font-style: normal;
font-weight: 700;
font-variation-settings: "opsz" 60;
}
.vn-mobile-nav__tel {
opacity: 0;
transform: translateY(-22px);
transition: opacity 420ms ease, transform 520ms var(--vn-drawer-ease), color 220ms ease, border-color 220ms ease;
padding: 0 0 0.35rem;
background: transparent;
color: var(--on-dark-strong);
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
border-radius: 0;
display: inline-flex;
align-items: center;
gap: 0.85rem;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.6rem, 5vw, 2.4rem);
letter-spacing: 0;
text-decoration: none;
}
body.has-nav-open .vn-mobile-nav__tel {
opacity: 1;
transform: translateY(0);
}
.vn-mobile-nav__tel::after {
content: "⟶";
font-style: normal;
font-family: var(--font-body);
font-size: 0.85em;
transition: transform 240ms var(--vn-drawer-ease);
}
.vn-mobile-nav__tel:hover {
color: var(--sage-300);
border-color: var(--sage-300);
}
.vn-mobile-nav__tel:hover::after {
transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
.vn-mobile-nav,
.vn-mobile-nav__overlay,
.vn-mobile-nav__list > li,
.vn-mobile-nav__wordmark,
.vn-mobile-nav__tel {
transition: none !important;
}
}
@media (max-width: 900px) {
.vn-site-nav,
.vn-site-header__cta { display: none; }
.vn-site-header__toggle { display: flex; }
.vn-site-header__inner { justify-content: space-between; }
}
.screen-reader-text {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); border: 0;
}
.vn-site-footer {
background-color: var(--sage-900);
background-image: var(--vn-grain);
background-attachment: fixed;
background-size: 360px 360px;
background-repeat: repeat;
color: var(--on-dark);
padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter) clamp(1.5rem, 3vw, 2rem);
font-family: var(--font-body);
position: relative;
}
.vn-site-footer__peaks {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 100%;
height: clamp(80px, 11vw, 200px);
pointer-events: none;
overflow: hidden;
}
.vn-site-footer__peaks-layer {
position: absolute;
inset: 0;
background-color: var(--sage-900);
background-image: var(--vn-grain);
background-attachment: fixed;
background-size: 360px 360px;
background-repeat: repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center bottom;
mask-position: center bottom;
}
.vn-site-footer__peaks-back {
opacity: 0.7;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vn-site-footer__peaks-front {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vn-site-footer__inner {
max-width: var(--page-wide);
margin: 0 auto;
}
.vn-site-footer p,
.vn-site-footer address,
.vn-site-footer li,
.vn-site-footer dd {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.65;
color: var(--on-dark);
font-style: normal;
margin: 0;
}
.vn-site-footer a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 200ms ease;
}
.vn-site-footer a:hover,
.vn-site-footer a:focus-visible {
border-bottom-color: var(--sage-300);
}
.vn-site-footer__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
.vn-site-footer__grid > .vn-site-footer__col {
padding: 0 clamp(1.5rem, 3vw, 2.5rem);
border-left: 1px solid color-mix(in srgb, var(--sage-300) 18%, transparent);
}
.vn-site-footer__grid > .vn-site-footer__col:first-child {
padding-left: 0;
border-left: 0;
}
.vn-site-footer__grid > .vn-site-footer__col:last-child {
padding-right: 0;
}
@media (max-width: 960px) {
.vn-site-footer__grid {
grid-template-columns: 1fr 1fr;
row-gap: 2.75rem;
}
.vn-site-footer__grid > .vn-site-footer__col {
padding: 0 clamp(1.5rem, 3vw, 2rem);
}
.vn-site-footer__grid > .vn-site-footer__col:nth-child(odd) {
padding-left: 0;
border-left: 0;
}
.vn-site-footer__brand { grid-column: 1 / -1; max-width: 48rem; padding-bottom: 1rem; }
}
@media (max-width: 580px) {
.vn-site-footer__grid {
grid-template-columns: 1fr;
row-gap: 3rem;
}
.vn-site-footer__grid > .vn-site-footer__col {
padding: 2.5rem 0 0;
border-left: 0;
border-top: 1px solid color-mix(in srgb, var(--sage-300) 18%, transparent);
}
.vn-site-footer__grid > .vn-site-footer__col:first-child {
border-top: 0;
padding-top: 0;
}
.vn-site-footer__brand { padding-bottom: 0; }
}
.vn-site-footer p.vn-site-footer__col-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
letter-spacing: -0.02em;
font-size: clamp(1.2rem, 1.55vw, 1.45rem);
color: var(--sage-300);
margin: 0 0 1.75rem;
line-height: 1.1;
}
.vn-site-footer__brand {
display: block;
}
.vn-site-footer__brand .vn-site-footer__tagline {
margin: 0 0 1.5rem;
}
.vn-site-footer__tagline {
font-size: 1.05rem;
line-height: 1.65;
color: var(--on-dark);
}
.vn-site-footer__seals {
display: flex;
align-items: flex-end;
gap: clamp(1.5rem, 3vw, 2.5rem);
margin-top: 1.5rem;
}
.vn-site-footer__badge {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
flex-shrink: 0;
}
.vn-site-footer__badge svg {
width: clamp(4.5rem, 5.5vw, 5.75rem);
height: auto;
display: block;
}
.vn-site-footer__badge svg path {
fill: var(--on-dark);
}
.vn-site-footer__badge-label {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.15rem, 1.4vw, 1.35rem);
color: var(--on-dark);
letter-spacing: 0.02em;
}
.vn-site-footer__heart {
display: inline-flex;
flex-shrink: 0;
align-self: center;
}
.vn-site-footer__heart svg {
width: clamp(5rem, 6.5vw, 7rem);
height: auto;
display: block;
}
.vn-site-footer__address {
margin: 0;
font-style: normal;
}
.vn-site-footer__contact-list {
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.vn-site-footer__contact-list {
gap: 1.25rem;
}
.vn-site-footer__contact-row {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.vn-site-footer__contact-list dt {
font-family: var(--font-body);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--sage-300);
font-weight: 600;
}
.vn-site-footer__contact-list dd {
margin: 0;
}
.vn-site-footer__contact-list .vn-site-footer__address {
font-style: normal;
font-size: 1.05rem;
line-height: 1.5;
color: var(--on-dark);
}
.vn-site-footer p a.vn-site-footer__contact-phone,
.vn-site-footer__contact-phone {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 1.15rem;
letter-spacing: -0.01em;
color: var(--on-dark-strong);
line-height: 1.3;
border-bottom: 0;
}
.vn-site-footer__contact-phone:hover,
.vn-site-footer__contact-phone:focus-visible {
color: var(--sage-300);
border-bottom: 0;
}
.vn-site-footer p a.vn-site-footer__contact-mail,
.vn-site-footer__contact-mail {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--on-dark);
letter-spacing: 0;
word-break: break-word;
}
.vn-site-footer__hours-list {
margin: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.vn-site-footer__hours-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
}
.vn-site-footer__hours-list dt {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--on-dark);
}
.vn-site-footer__hours-list dd {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--on-dark-strong);
margin: 0;
}
.vn-site-footer__hours-row.is-closed dt {
color: var(--on-dark-muted);
}
.vn-site-footer__hours-row.is-closed dd {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--sage-300);
}
.vn-site-footer__nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.vn-site-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.5rem;
padding-top: clamp(1.25rem, 2vw, 1.75rem);
border-top: 1px solid color-mix(in srgb, var(--sage-300) 18%, transparent);
}
.vn-site-footer__copy,
.vn-site-footer__credit {
font-size: 0.78rem;
color: var(--on-dark-muted);
margin: 0;
line-height: 0;
}
.vn-site-footer__credit-link {
display: inline-flex;
align-items: center;
color: var(--on-dark-muted);
opacity: 0.7;
text-decoration: none;
border-bottom: none;
transition: opacity 220ms ease, color 220ms ease;
}
.vn-site-footer__credit-link:hover,
.vn-site-footer__credit-link:focus,
.vn-site-footer__credit-link:focus-visible {
opacity: 1;
color: var(--on-dark-strong);
text-decoration: none;
border-bottom: none;
}
.vn-site-footer__credit-badge {
height: 3.25rem;
width: auto;
display: block;
color: currentColor;
filter: drop-shadow(0 0 0.35px currentColor) drop-shadow(0 0 0.35px currentColor);
}
.vn-site-footer__legal-nav {
display: flex;
gap: 1.25rem;
}
.vn-site-footer__legal-nav a {
font-size: 0.78rem;
color: var(--on-dark-muted);
}
@media (max-width: 720px) {
.vn-site-footer__legal {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
.vn-trust {
padding: var(--space-section) var(--gutter);
margin: 0;
overflow: hidden;
}
.vn-trust__inner {
max-width: var(--page-max);
margin: 0 auto;
}
.vn-trust__header {
display: grid;
grid-template-columns: 1.5fr 1fr;
align-items: end;
gap: clamp(2rem, 5vw, 4rem);
margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.vn-trust__header-left {
text-align: left;
}
.vn-trust__header-right {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: 1.25rem;
}
.vn-trust__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--sage-700);
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-trust__eyebrow::before {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--sage-700);
}
.vn-trust__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(1.85rem, 3.5vw, 2.85rem);
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--sage-900);
margin: 0;
max-width: 22ch;
text-wrap: balance;
}
.vn-trust__intro {
font-family: var(--font-body);
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
line-height: 1.6;
color: var(--sage-700);
max-width: 50ch;
margin: 1rem 0 0;
}
.vn-trust__aggregate {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.35rem;
}
.vn-trust__aggregate-rating {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2.5rem, 4vw, 3.25rem);
line-height: 1;
color: var(--on-dark-strong);
letter-spacing: -0.02em;
}
.vn-trust__aggregate-divider {
color: var(--on-dark-muted);
margin: 0 0.15em;
font-weight: 300;
}
.vn-trust__aggregate-max {
color: var(--on-dark-muted);
}
.vn-trust__aggregate-stars {
display: inline-flex;
gap: 0.1rem;
font-size: 1.05rem;
color: var(--sage-300);
}
.vn-trust__aggregate-stars .vn-trust__star {
color: color-mix(in srgb, var(--sage-300) 25%, transparent);
}
.vn-trust__aggregate-stars .vn-trust__star.is-on {
color: var(--sage-300);
}
.vn-trust__aggregate-stars .vn-trust__star.is-on.is-half {
background: linear-gradient(90deg, var(--sage-300) 50%, color-mix(in srgb, var(--sage-300) 25%, transparent) 50%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.vn-trust__aggregate-count {
font-family: var(--font-body);
font-size: 0.82rem;
color: var(--on-dark-muted);
letter-spacing: 0.02em;
}
.vn-trust__google-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--on-dark);
text-decoration: none;
border-bottom: 1px solid var(--divider-on-dark);
padding-bottom: 0.15rem;
transition: color 0.25s ease, border-color 0.25s ease;
}
.vn-trust__google-link:hover {
color: var(--on-dark-strong);
border-color: var(--on-dark-strong);
}
.vn-trust__google-link svg {
width: 0.85rem;
height: 0.85rem;
transition: transform 0.25s ease;
}
.vn-trust__google-link:hover svg {
transform: translate(2px, -2px);
}
@media (max-width: 880px) {
.vn-trust__header {
grid-template-columns: 1fr;
gap: 2rem;
}
.vn-trust__header-right {
align-items: flex-start;
text-align: left;
}
.vn-trust__aggregate {
align-items: flex-start;
}
}
.vn-trust__carousel {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(0.75rem, 2vw, 1.5rem);
margin: 0 auto;
}
.vn-trust__viewport {
overflow: hidden;
position: relative;
}
.vn-trust__viewport::before,
.vn-trust__viewport::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: clamp(2rem, 5vw, 4rem);
pointer-events: none;
z-index: 2;
}
.vn-trust__viewport::before {
left: 0;
background: linear-gradient(90deg, var(--sage-800) 0%, transparent 100%);
}
.vn-trust__viewport::after {
right: 0;
background: linear-gradient(270deg, var(--sage-800) 0%, transparent 100%);
}
@media (max-width: 880px) {
.vn-trust__viewport::before,
.vn-trust__viewport::after {
width: clamp(1.5rem, 6vw, 3rem);
}
}
.vn-trust__track {
display: flex;
flex-wrap: nowrap;
transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease;
width: calc(var(--vn-total, 1) / var(--vn-visible, 3) * 100%);
will-change: transform, opacity;
}
.vn-trust__track.is-changing {
opacity: 0.5;
}
.vn-trust__card {
flex: 0 0 calc(100% / var(--vn-total, 1));
display: flex;
flex-direction: column;
gap: 1.1rem;
background: var(--paper-50);
border: 1px solid rgba(45, 53, 48, 0.08);
border-radius: 6px;
padding: clamp(1.75rem, 3vw, 2.5rem);
margin: 0 clamp(0.5rem, 1vw, 0.85rem);
box-sizing: border-box;
}
@media (max-width: 880px) {
.vn-trust__track { width: calc(var(--vn-total, 1) / 2 * 100%); }
}
@media (max-width: 560px) {
.vn-trust__track { width: calc(var(--vn-total, 1) / 1 * 100%); }
.vn-trust__card {
margin: 0;
padding: clamp(1.4rem, 5vw, 1.9rem);
}
.vn-trust__viewport::before,
.vn-trust__viewport::after {
display: none;
}
}
.vn-trust__card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
}
.vn-trust__rating {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.vn-trust__rating-row {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
}
.vn-trust__source {
font-family: var(--font-body);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--sage-600);
font-weight: 500;
}
.vn-trust__rating-num {
font-family: var(--font-display);
font-weight: 500;
font-variation-settings: "opsz" 24;
font-size: 1.15rem;
color: var(--sage-900);
letter-spacing: 0.01em;
}
.vn-trust__platform-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
color: var(--sage-600);
opacity: 0.85;
}
.vn-trust__platform-icon svg {
width: 100%;
height: 100%;
}
.vn-trust__stars {
display: inline-flex;
gap: 0.05rem;
font-size: 0.85rem;
letter-spacing: 0.02em;
}
.vn-trust__star {
color: rgba(45, 53, 48, 0.18);
}
.vn-trust__star.is-on {
color: var(--sage-700);
}
.vn-trust__quote-text {
font-family: var(--font-display);
font-style: italic;
font-variation-settings: "opsz" 24;
font-size: clamp(1.125rem, 1.5vw, 1.3rem);
line-height: 1.55;
color: var(--sage-900);
margin: 0;
flex-grow: 1;
}
.vn-trust__quote-meta {
display: flex;
align-items: center;
gap: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(45, 53, 48, 0.1);
}
.vn-trust__quote-meta-text {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.vn-trust__avatar {
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.vn-trust__avatar-initials {
font-family: var(--font-display);
font-weight: 500;
font-variation-settings: "opsz" 24;
font-size: 1rem;
color: var(--sage-900);
letter-spacing: 0.02em;
}
.vn-trust__quote-author {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
color: var(--sage-900);
line-height: 1.2;
}
.vn-trust__quote-context {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--sage-700);
line-height: 1.3;
}
.vn-trust__nav {
width: clamp(2.5rem, 4vw, 3rem);
height: clamp(2.5rem, 4vw, 3rem);
border-radius: 50%;
background: transparent;
border: 1px solid var(--divider-on-dark);
color: var(--on-dark);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
padding: 0;
flex-shrink: 0;
}
.vn-trust__nav:hover {
background: var(--on-dark-strong);
color: var(--sage-900);
border-color: var(--on-dark-strong);
}
.vn-trust__nav svg {
width: 1.1rem;
height: 1.1rem;
}
.vn-trust__nav:focus-visible {
outline: 2px solid var(--on-dark-strong);
outline-offset: 3px;
}
@media (max-width: 880px) {
.vn-trust__carousel {
grid-template-columns: 1fr;
gap: 0;
}
.vn-trust__viewport {
grid-column: 1;
}
.vn-trust__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
background: color-mix(in srgb, var(--sage-900) 75%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.vn-trust__nav--prev {
left: clamp(0.25rem, 1.5vw, 0.75rem);
}
.vn-trust__nav--next {
right: clamp(0.25rem, 1.5vw, 0.75rem);
}
}
@media (max-width: 560px) {
.vn-trust__nav {
width: 2.5rem;
height: 2.5rem;
border-width: 1.5px;
}
}
.vn-saisonal {
position: relative;
min-height: clamp(420px, 60vh, 620px);
margin: 0;
overflow: hidden;
display: flex;
align-items: flex-end;
background: var(--sage-900);
}
.vn-saisonal__media {
position: absolute;
inset: 0;
margin: 0;
overflow: hidden;
z-index: 0;
}
.vn-saisonal__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vn-saisonal::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(27, 31, 24, 0.78) 0%,
rgba(27, 31, 24, 0.55) 35%,
rgba(27, 31, 24, 0.25) 65%,
rgba(27, 31, 24, 0.1) 100%
);
z-index: 1;
pointer-events: none;
}
.vn-saisonal__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--page-wide);
margin: 0 auto;
padding: clamp(3rem, 7vw, 5rem) var(--gutter);
}
.vn-saisonal__copy {
max-width: 36rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vn-saisonal__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.8rem;
font-weight: 600;
color: #FFFFFF;
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.7rem;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
.vn-saisonal__eyebrow::before {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: #FFFFFF;
}
.vn-saisonal__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: #FFFFFF;
margin: 0;
text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}
.vn-saisonal__headline .vn-italic,
.vn-saisonal__headline em {
font-style: italic;
color: var(--sage-300);
}
.vn-saisonal__body {
font-family: var(--font-body);
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
line-height: 1.65;
color: rgba(255, 255, 255, 0.92);
margin: 0;
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.vn-saisonal__action {
margin: 0.5rem 0 0;
}
@media (max-width: 760px) {
.vn-saisonal {
min-height: clamp(440px, 70vh, 600px);
}
.vn-saisonal__inner {
padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
}
.vn-imagewall {
background: var(--sage-100);
padding: var(--space-section) var(--gutter);
margin: 0;
}
.vn-imagewall__inner {
max-width: var(--page-wide);
margin: 0 auto;
}
.vn-imagewall__header {
text-align: center;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
max-width: 56rem;
}
.vn-imagewall__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--sage-700);
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-imagewall__eyebrow::before,
.vn-imagewall__eyebrow::after {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--sage-700);
}
.vn-imagewall__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(1.85rem, 3.5vw, 2.85rem);
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--sage-900);
margin: 0 auto;
max-width: 24ch;
text-wrap: balance;
}
.vn-imagewall__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-rows: minmax(180px, 22vh);
gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.vn-imagewall__cell-1 { grid-column: 1 / 6; grid-row: 1 / 3; }
.vn-imagewall__cell-2 { grid-column: 6 / 9; grid-row: 1 / 2; }
.vn-imagewall__cell-3 { grid-column: 9 / 13; grid-row: 1 / 3; }
.vn-imagewall__cell-4 { grid-column: 6 / 9; grid-row: 2 / 3; }
.vn-imagewall__cell-5 { grid-column: 1 / 8; grid-row: 3 / 4; }
.vn-imagewall__cell-6 { grid-column: 8 / 13; grid-row: 3 / 4; }
.vn-imagewall__cell {
position: relative;
overflow: hidden;
border-radius: 6px;
background: var(--sage-200);
margin: 0;
}
.vn-imagewall__cell::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
225deg,
rgba(27, 31, 24, 0.55) 0%,
rgba(27, 31, 24, 0.2) 18%,
rgba(27, 31, 24, 0) 45%
);
pointer-events: none;
z-index: 1;
}
.vn-imagewall__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vn-imagewall__cell:hover .vn-imagewall__image {
transform: scale(1.04);
}
.vn-imagewall__label {
position: absolute;
right: 0.5rem;
bottom: 1rem;
transform-origin: 100% 100%;
transform: rotate(-90deg) translateX(100%) translateY(0);
font-family: var(--font-display);
font-style: italic;
font-variation-settings: "opsz" 32;
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
font-weight: 400;
letter-spacing: 0.04em;
color: var(--paper-50);
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
white-space: nowrap;
pointer-events: none;
z-index: 2;
padding: 0;
}
@media (max-width: 760px) {
.vn-imagewall__grid {
grid-template-columns: 1fr;
grid-auto-rows: minmax(220px, 32vh);
}
.vn-imagewall__cell-1,
.vn-imagewall__cell-2,
.vn-imagewall__cell-3,
.vn-imagewall__cell-4,
.vn-imagewall__cell-5,
.vn-imagewall__cell-6 {
grid-column: 1 / -1;
grid-row: auto;
}
.vn-imagewall__label {
transform: none;
right: auto;
left: 1rem;
bottom: 1rem;
font-size: 0.95rem;
}
}
@media (min-width: 761px) and (max-width: 1100px) {
.vn-imagewall__grid {
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(200px, 26vh);
}
.vn-imagewall__cell-1 { grid-column: 1 / 4; grid-row: 1 / 3; }
.vn-imagewall__cell-2 { grid-column: 4 / 7; grid-row: 1 / 2; }
.vn-imagewall__cell-3 { grid-column: 4 / 7; grid-row: 2 / 3; }
.vn-imagewall__cell-4 { grid-column: 1 / 4; grid-row: 3 / 4; }
.vn-imagewall__cell-5 { grid-column: 4 / 7; grid-row: 3 / 4; }
.vn-imagewall__cell-6 { grid-column: 1 / 7; grid-row: 4 / 5; }
}
.vn-faq {
padding: var(--space-section) var(--gutter);
}
.vn-faq__inner {
max-width: 56rem;
margin: 0 auto;
}
.vn-faq__header {
text-align: center;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.vn-faq__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--sage-700);
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-faq__eyebrow::before,
.vn-faq__eyebrow::after {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--sage-700);
}
.vn-faq__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(1.85rem, 3.5vw, 2.85rem);
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--sage-900);
margin: 0;
max-width: 24ch;
margin: 0 auto;
text-wrap: balance;
}
.vn-faq__intro {
font-family: var(--font-body);
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
line-height: 1.6;
color: var(--sage-700);
max-width: 50ch;
margin: 1.25rem auto 0;
}
.vn-faq__list {
display: flex;
flex-direction: column;
margin: 0;
}
.vn-faq__item {
border-top: 1px solid rgba(45, 53, 48, 0.12);
}
.vn-faq__item:last-child {
border-bottom: 1px solid rgba(45, 53, 48, 0.12);
}
.vn-faq__item summary {
list-style: none;
cursor: pointer;
user-select: none;
}
.vn-faq__item summary::-webkit-details-marker {
display: none;
}
.vn-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 32;
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
line-height: 1.3;
color: var(--sage-900);
}
.vn-faq__q-text {
flex: 1;
}
.vn-faq__q-icon {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
color: var(--sage-700);
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vn-faq__q-icon svg {
width: 100%;
height: 100%;
}
.vn-faq__item[open] .vn-faq__q-icon {
transform: rotate(45deg);
color: var(--sage-900);
}
.vn-faq__answer {
padding: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
font-family: var(--font-body);
font-size: 1.125rem;
line-height: 1.7;
color: var(--sage-800);
max-width: 56ch;
}
.vn-faq__answer p {
margin: 0 0 0.85em;
}
.vn-faq__answer p:last-child {
margin-bottom: 0;
}
.vn-faq__item[open] summary ~ .vn-faq__answer {
animation: vn-faq-fade 0.4s ease-out;
}
@keyframes vn-faq-fade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.vn-anfahrt {
position: relative;
background: var(--paper-50);
padding: 0;
min-height: clamp(560px, 70vh, 720px);
}
.vn-anfahrt__map-wrap {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: var(--sage-200);
z-index: 1;
}
.vn-anfahrt__map-wrap .leaflet-tile {
filter: sepia(0.18) hue-rotate(50deg) saturate(0.85);
}
.vn-anfahrt__map-wrap .leaflet-control-attribution {
font-size: 0.65rem;
background: rgba(255, 255, 255, 0.85);
}
.vn-anfahrt__container {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
max-width: var(--page-max);
margin: 0 auto;
padding: 0 var(--gutter);
pointer-events: none;
}
.vn-anfahrt__card {
pointer-events: auto;
width: clamp(19rem, 26vw, 23rem);
max-width: 100%;
padding: clamp(1.25rem, 2vw, 1.75rem);
background: var(--paper-50);
border: 1px solid rgba(45, 53, 48, 0.1);
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
@media (max-width: 880px) {
.vn-anfahrt {
min-height: auto;
display: flex;
flex-direction: column;
}
.vn-anfahrt__map-wrap {
position: relative;
inset: auto;
aspect-ratio: 4 / 3;
height: auto;
}
.vn-anfahrt__container {
position: relative;
inset: auto;
display: block;
padding: 0;
}
.vn-anfahrt__card {
margin: -3rem auto 3rem;
width: 90%;
max-width: 32rem;
}
}
.vn-anfahrt__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--sage-700);
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-anfahrt__eyebrow::before {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--sage-700);
}
.vn-anfahrt__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(1.5rem, 2.4vw, 1.95rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--sage-900);
margin: 0;
max-width: 16ch;
text-wrap: balance;
}
.vn-anfahrt__address {
font-family: var(--font-body);
font-style: normal;
font-size: 0.9rem;
line-height: 1.5;
color: var(--sage-800);
margin: 0;
}
.vn-anfahrt__routes {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 0.35rem 0 0;
}
.vn-anfahrt__route {
display: grid;
grid-template-columns: 5.5rem 1fr;
gap: 0.65rem;
align-items: start;
}
@media (max-width: 560px) {
.vn-anfahrt__route { grid-template-columns: 1fr; gap: 0.15rem; }
}
.vn-anfahrt__route dt {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.65rem;
font-weight: 600;
color: var(--sage-700);
padding-top: 0.2rem;
}
.vn-anfahrt__route dd {
margin: 0;
font-family: var(--font-body);
font-size: 0.82rem;
line-height: 1.45;
color: var(--sage-800);
}
.vn-anfahrt__route dd a {
color: var(--sage-900);
text-decoration: none;
border-bottom: 1px solid var(--sage-500);
padding-bottom: 0.05rem;
transition: border-color 0.25s ease;
}
.vn-anfahrt__route dd a:hover {
border-color: var(--sage-900);
}
.vn-anfahrt__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0 0;
}
.vn-anfahrt__cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.7rem 1rem;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 500;
border-radius: 6px;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.vn-anfahrt__cta--primary {
background: var(--sage-900);
color: var(--paper-50);
border: 1px solid var(--sage-900);
}
.vn-anfahrt__cta--primary:hover {
background: var(--sage-800);
}
.vn-anfahrt__cta--secondary {
background: transparent;
color: var(--sage-900);
border: 1px solid var(--sage-700);
}
.vn-anfahrt__cta--secondary:hover {
background: var(--sage-900);
color: var(--paper-50);
}
.vn-anfahrt__cta svg {
width: 0.95rem;
height: 0.95rem;
}
.vn-anfahrt__marker {
background: transparent;
border: 0;
}
.vn-anfahrt__marker-pin {
display: block;
width: 22px;
height: 22px;
background: var(--copper-warm, #B07D4F);
border: 3px solid var(--paper-50);
border-radius: 50%;
position: relative;
}
.vn-anfahrt__marker-pin::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(176, 125, 79, 0.4);
animation: vn-pulse 2.5s ease-out infinite;
}
@keyframes vn-pulse {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2.6); opacity: 0; }
}
.vn-theme {
padding: var(--space-section) var(--gutter);
margin: 0;
}
.vn-theme--bg-sage-50 { background: var(--sage-50); }
.vn-theme--bg-sage-100 { background: var(--sage-100); }
.vn-theme--bg-paper-50 { background: var(--paper-50); }
.vn-theme__inner {
max-width: var(--page-max);
margin: 0 auto;
}
.vn-theme__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: clamp(3rem, 7vw, 6rem);
align-items: center;
}
@media (max-width: 880px) {
.vn-theme__grid {
grid-template-columns: 1fr;
row-gap: 2.5rem;
}
}
.vn-theme--reverse .vn-theme__media {
order: 2;
}
.vn-theme--reverse .vn-theme__body {
order: 1;
}
@media (max-width: 880px) {
.vn-theme--reverse .vn-theme__media,
.vn-theme--reverse .vn-theme__body {
order: unset;
}
}
.vn-theme__media {
margin: 0;
border-radius: 6px;
overflow: hidden;
aspect-ratio: 5 / 4;
background: transparent;
position: relative;
}
.vn-theme__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vn-theme__media:hover .vn-theme__image {
transform: scale(1.04);
}
.vn-theme__image-caption {
display: none;
}
.vn-theme__body {
display: flex;
flex-direction: column;
gap: 1.4rem;
max-width: 34rem;
}
.vn-theme__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--sage-700);
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-theme__eyebrow::before {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--sage-700);
}
.vn-theme__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--sage-900);
margin: 0;
max-width: 18ch;
text-wrap: balance;
}
.vn-theme__text {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
color: var(--sage-800);
}
.vn-theme__text p {
margin: 0 0 0.85em;
}
.vn-theme__text p:last-child { margin-bottom: 0; }
.vn-theme__highlights {
list-style: none;
padding: 0;
margin: 0.5rem 0 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.6rem clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 560px) {
.vn-theme__highlights { grid-template-columns: 1fr; }
}
.vn-theme__highlight {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--sage-800);
padding-left: 1.35rem;
position: relative;
line-height: 1.45;
}
.vn-theme__highlight::before {
content: "◆";
position: absolute;
left: 0;
top: 0;
font-size: 0.55rem;
color: var(--sage-500);
line-height: 2.4;
}
.vn-theme__cta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--sage-900);
text-decoration: none;
border-bottom: 1px solid var(--sage-700);
padding-bottom: 0.25rem;
margin-top: 0.75rem;
align-self: flex-start;
transition: color 0.25s ease, border-color 0.25s ease;
}
.vn-theme__cta:hover {
color: var(--sage-700);
border-color: var(--sage-900);
}
.vn-theme__cta-arrow {
transition: transform 0.25s ease;
}
.vn-theme__cta:hover .vn-theme__cta-arrow {
transform: translateX(4px);
}
.vn-atm {
position: relative;
min-height: clamp(480px, 70vh, 720px);
overflow: hidden;
background: var(--sage-900);
display: flex;
align-items: center;
}
.vn-atm__media {
position: absolute;
inset: 0;
margin: 0;
z-index: 0;
will-change: transform;
}
.vn-atm__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.12);
}
.vn-atm__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(27, 31, 24, 0.45) 0%,
rgba(27, 31, 24, 0.65) 100%
);
z-index: 1;
pointer-events: none;
}
.vn-atm__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--page-max);
margin: 0 auto;
padding: clamp(4rem, 8vw, 6rem) var(--gutter);
text-align: center;
}
.vn-atm__caption {
max-width: 52rem;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
}
.vn-atm__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.25em;
font-size: 0.78rem;
font-weight: 600;
color: var(--sage-200);
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.vn-atm__eyebrow::before,
.vn-atm__eyebrow::after {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--sage-200);
}
.vn-atm__quote {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(1.65rem, 3.5vw, 2.65rem);
line-height: 1.25;
letter-spacing: -0.015em;
color: #FFFFFF;
margin: 0;
text-wrap: balance;
text-shadow: 0 2px 28px rgba(0, 0, 0, 0.4);
}
.vn-atm__attribution {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--sage-200);
margin: 0.5rem 0 0;
letter-spacing: 0.04em;
}
.vn-im-marquee {
background: var(--sage-50);
padding: clamp(3rem, 5vw, 4rem) 0 clamp(4rem, 7vw, 6rem);
overflow: hidden;
}
.vn-im-marquee__header {
max-width: var(--page-max);
margin: 0 auto clamp(2rem, 4vw, 3rem);
padding: 0 var(--gutter);
text-align: center;
}
.vn-im-marquee__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--sage-700);
margin: 0 0 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-im-marquee__eyebrow::before,
.vn-im-marquee__eyebrow::after {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--sage-700);
}
.vn-im-marquee__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--sage-900);
margin: 0;
max-width: 28ch;
margin: 0 auto;
text-wrap: balance;
}
.vn-im-marquee__track {
display: flex;
gap: clamp(0.75rem, 1.5vw, 1.5rem);
width: max-content;
animation: vn-marquee-scroll 60s linear infinite;
will-change: transform;
}
.vn-im-marquee__track:hover {
animation-play-state: paused;
}
@keyframes vn-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.vn-im-marquee__item {
flex: 0 0 clamp(220px, 28vw, 360px);
aspect-ratio: 4 / 5;
margin: 0;
overflow: hidden;
border-radius: 6px;
background: var(--sage-200);
position: relative;
}
.vn-im-marquee__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vn-im-marquee__item::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 40%;
background: linear-gradient(to top, rgba(27, 31, 24, 0.6) 0%, rgba(27, 31, 24, 0) 100%);
pointer-events: none;
}
.vn-im-marquee__caption {
position: absolute;
left: 1rem;
bottom: 1rem;
font-family: var(--font-display);
font-style: italic;
font-variation-settings: "opsz" 24;
font-size: clamp(0.9rem, 1.2vw, 1.05rem);
color: var(--paper-50);
z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
.vn-im-marquee__track {
animation: none;
}
}
.vn-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
.vn-reveal.is-revealed {
opacity: 1;
transform: translateY(0);
}
.vn-reveal-mask {
opacity: 1;
transform: none;
overflow: hidden;
}
.vn-reveal-mask img {
clip-path: inset(0 100% 0 0);
will-change: clip-path;
}
.vn-reveal-mask.is-revealed img {
animation: vn-mask-reveal 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes vn-mask-reveal {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0% 0 0); }
}
@media (prefers-reduced-motion: reduce) {
.vn-reveal-mask img { clip-path: none; }
.vn-reveal-mask.is-revealed img { animation: none; }
}
.vn-reveal-left {
transform: translateX(-28px);
}
.vn-reveal-left.is-revealed {
transform: translateX(0);
}
.vn-reveal-right {
transform: translateX(28px);
}
.vn-reveal-right.is-revealed {
transform: translateX(0);
}
.vn-reveal-scale {
transform: scale(0.96);
}
.vn-reveal-scale.is-revealed {
transform: scale(1);
}
.vn-delay-1 { transition-delay: 0.1s; }
.vn-delay-2 { transition-delay: 0.2s; }
.vn-delay-3 { transition-delay: 0.3s; }
.vn-delay-4 { transition-delay: 0.4s; }
.vn-delay-5 { transition-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
.vn-reveal, .vn-reveal-left, .vn-reveal-right, .vn-reveal-scale {
opacity: 1 !important;
transform: none !important;
}
.vn-sticky-themes__chapter { opacity: 1 !important; }
}
.vn-cinematic-n {
position: relative;
padding: clamp(20vh, 30vh, 28rem) var(--gutter);
min-height: 100vh;
}
.vn-cinematic-n__inner {
max-width: 64rem;
margin: 0 auto;
}
.vn-cinematic-n__quote {
font-family: var(--font-display);
font-size: clamp(2.25rem, 5.5vw, 4.5rem);
font-weight: 400;
line-height: 1.18;
color: var(--sage-900);
letter-spacing: -0.01em;
margin: 0;
}
.vn-cinematic-n__word {
display: inline-block;
opacity: 0.13;
transition: opacity 220ms ease-out;
will-change: opacity;
}
.vn-cinematic-n__caption {
font-family: var(--font-body);
font-style: italic;
font-size: 0.95rem;
color: var(--sage-700);
margin-top: 2.5rem;
}
.vn-cinematic-o {
position: relative;
height: 200vh;
background: var(--sage-900);
}
.vn-cinematic-o__sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.vn-cinematic-o__photo {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
transition: opacity 900ms ease-out;
will-change: opacity;
}
.vn-cinematic-o__photo.is-active {
opacity: 1;
}
.vn-cinematic-o__photo img,
.vn-cinematic-o__photo > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vn-cinematic-o__photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(27, 31, 24, 0.15) 0%, rgba(27, 31, 24, 0.55) 70%, rgba(27, 31, 24, 0.7) 100%);
pointer-events: none;
}
.vn-cinematic-o__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--gutter);
z-index: 2;
}
.vn-cinematic-o__quote {
position: absolute;
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 5.5rem);
font-weight: 400;
line-height: 1.05;
color: var(--paper);
letter-spacing: -0.015em;
text-align: center;
margin: 0;
max-width: 56rem;
opacity: 0;
transform: translateY(20px);
transition: opacity 900ms ease-out, transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.vn-cinematic-o__quote.is-active {
opacity: 1;
transform: translateY(0);
}
.vn-cinematic-q {
position: relative;
height: 300vh;
background: var(--sage-100);
}
.vn-cinematic-q__sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
}
.vn-cinematic-q__track {
display: flex;
width: max-content;
will-change: transform;
}
.vn-cinematic-q__card {
flex: 0 0 100vw;
height: 100vh;
display: flex;
align-items: center;
gap: clamp(2rem, 6vw, 5rem);
padding: 0 clamp(2rem, 8vw, 7rem);
box-sizing: border-box;
}
.vn-cinematic-q__photo {
flex: 0 0 48%;
max-width: 720px;
height: clamp(380px, 65vh, 560px);
margin: 0;
overflow: hidden;
border-radius: 6px;
}
.vn-cinematic-q__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vn-cinematic-q__text {
flex: 1 1 auto;
max-width: 32rem;
}
.vn-cinematic-q__year {
font-family: var(--font-display);
font-size: clamp(4rem, 9vw, 8rem);
font-weight: 400;
color: var(--sage-700);
line-height: 1;
margin: 0 0 1rem;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 96;
}
.vn-cinematic-q__title {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
font-weight: 400;
color: var(--sage-900);
margin: 0 0 1.5rem;
letter-spacing: -0.01em;
}
.vn-cinematic-q__body {
font-size: 1.05rem;
line-height: 1.65;
color: var(--ink-700);
margin: 0;
}
.vn-cinematic-q__progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(45, 53, 48, 0.1);
}
.vn-cinematic-q__progress-fill {
display: block;
height: 100%;
width: 0;
background: var(--sage-900);
transition: width 60ms linear;
}
@media (max-width: 880px) {
.vn-cinematic-q__card {
flex-direction: column;
justify-content: center;
gap: 1.5rem;
padding: 4rem 2rem;
}
.vn-cinematic-q__photo {
flex: 0 0 auto;
width: 100%;
max-width: none;
height: clamp(220px, 38vh, 320px);
}
}
.vn-galerie-reactive {
padding: var(--space-section) 0;
overflow: hidden;
}
.vn-galerie-reactive__viewport {
overflow-x: auto;
overflow-y: hidden;
width: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
scroll-behavior: auto;
}
.vn-galerie-reactive__viewport::-webkit-scrollbar {
display: none;
}
.vn-galerie-reactive__viewport:active {
cursor: grabbing;
}
.vn-galerie-reactive__track {
display: flex;
gap: clamp(1rem, 1.5vw, 1.75rem);
width: max-content;
}
.vn-galerie-reactive__item {
flex: 0 0 auto;
margin: 0;
overflow: hidden;
border-radius: 6px;
background: var(--sage-200);
height: clamp(380px, 48vw, 640px);
}
.vn-galerie-reactive__item img {
display: block;
height: 100%;
width: auto;
object-fit: cover;
pointer-events: none;
user-select: none;
}
@media (prefers-reduced-motion: reduce) {
.vn-galerie-reactive__viewport { scroll-behavior: auto; }
}
.vn-galerie-home {
padding: var(--space-section) var(--gutter);
background: var(--sage-100);
}
.vn-galerie-home__inner {
max-width: var(--page-max);
margin: 0 auto;
}
.vn-galerie-home__header {
margin-bottom: clamp(3rem, 6vw, 5rem);
max-width: 56rem;
}
.vn-galerie-home__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.75rem;
font-weight: 600;
color: var(--sage-700);
margin: 0 0 1rem;
}
.vn-galerie-home__eyebrow::before {
content: "";
display: inline-block;
width: 1.5rem;
height: 1px;
background: var(--sage-700);
vertical-align: middle;
margin-right: 0.75rem;
}
.vn-galerie-home__headline {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 400;
line-height: 1.05;
color: var(--sage-900);
margin: 0;
letter-spacing: -0.01em;
}
.vn-galerie-home__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, clamp(200px, 22vw, 340px));
gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
.vn-galerie-home__item {
margin: 0;
overflow: hidden;
border-radius: 6px;
background: var(--sage-200);
position: relative;
}
.vn-galerie-home__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vn-galerie-home__item--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.vn-galerie-home__item--2 { grid-column: 3; grid-row: 1; }
.vn-galerie-home__item--3 { grid-column: 3; grid-row: 2; }
.vn-galerie-home__item--4 { grid-column: 1; grid-row: 3; }
.vn-galerie-home__item--5 { grid-column: 2; grid-row: 3; }
.vn-galerie-home__item--6 { grid-column: 3; grid-row: 3; }
.vn-galerie-home__item img {
transition: transform 800ms cubic-bezier(0.33, 1, 0.68, 1);
}
.vn-galerie-home__item:hover img {
transform: scale(1.04);
}
@media (max-width: 720px) {
.vn-galerie-home__grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, clamp(160px, 42vw, 240px));
gap: 0.5rem;
}
.vn-galerie-home__item--1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.vn-galerie-home__item--2 { grid-column: 1; grid-row: 3; }
.vn-galerie-home__item--3 { grid-column: 2; grid-row: 3; }
.vn-galerie-home__item--4 { grid-column: 1; grid-row: 4; }
.vn-galerie-home__item--5 { grid-column: 2; grid-row: 4; }
.vn-galerie-home__item--6 { display: none; }
}
.vn-sticky-themes {
padding: var(--space-section) var(--gutter);
overflow: visible;
}
.vn-sticky-themes__inner {
max-width: var(--page-max);
margin: 0 auto;
}
.vn-sticky-themes__header {
margin-bottom: clamp(4rem, 7vw, 6rem);
max-width: 56rem;
}
.vn-sticky-themes__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.75rem;
font-weight: 600;
color: var(--sage-700);
margin: 0 0 1rem;
}
.vn-sticky-themes__eyebrow::before {
content: "";
display: inline-block;
width: 1.5rem;
height: 1px;
background: var(--sage-700);
vertical-align: middle;
margin-right: 0.75rem;
}
.vn-sticky-themes__headline {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 400;
line-height: 1.05;
color: var(--sage-900);
margin: 0;
letter-spacing: -0.01em;
}
.vn-sticky-themes__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
column-gap: clamp(3rem, 7vw, 7rem);
align-items: stretch;
}
.vn-sticky-themes__text-col {
display: flex;
flex-direction: column;
gap: clamp(6rem, 18vh, 14rem);
}
.vn-sticky-themes__chapter {
min-height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0.32;
transition: opacity 700ms ease-out, filter 700ms ease-out;
filter: blur(0.5px);
will-change: opacity, filter;
}
.vn-sticky-themes__chapter.is-active {
opacity: 1;
filter: blur(0);
}
.vn-sticky-themes__chapter-photo {
display: none;
}
.vn-sticky-themes__chapter-index {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
margin: 0 0 1.5rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-sticky-themes__chapter-index::before {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-sticky-themes__chapter-headline {
font-family: var(--font-display);
font-size: clamp(2rem, 3.4vw, 2.85rem);
font-weight: 400;
line-height: 1.1;
color: var(--sage-900);
margin: 0 0 1.25rem;
letter-spacing: -0.005em;
}
.vn-sticky-themes__chapter-body {
color: var(--ink-700);
margin-bottom: 1.5rem;
font-size: 1.175rem;
line-height: 1.7;
}
.vn-sticky-themes__chapter-body p { margin: 0 0 0.75rem; }
.vn-sticky-themes__chapter-highlights {
display: none;
list-style: none;
padding: 0;
margin: 0 0 2rem;
flex-direction: column;
gap: 0.6rem;
}
.vn-sticky-themes__chapter-highlights li {
position: relative;
padding-left: 1.5rem;
color: var(--ink-700);
font-size: 0.95rem;
line-height: 1.5;
}
.vn-sticky-themes__chapter-highlights li::before {
content: "◆";
position: absolute;
left: 0;
color: var(--sage-600);
font-size: 0.7rem;
top: 0.35rem;
}
.vn-sticky-themes__chapter-cta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--sage-900);
font-family: var(--font-body);
font-weight: 500;
font-size: 0.95rem;
text-decoration: none;
border-bottom: 1px solid var(--sage-700);
padding: 0 0 0.3rem;
align-self: flex-start;
transition: gap 300ms ease-out, border-color 300ms;
}
.vn-sticky-themes__chapter-cta:hover {
gap: 0.85rem;
border-bottom-color: var(--sage-900);
}
.vn-sticky-themes__chapter-cta-arrow {
transition: transform 300ms ease-out;
}
.vn-sticky-themes__chapter-cta:hover .vn-sticky-themes__chapter-cta-arrow {
transform: translateX(3px);
}
.vn-sticky-themes__media-col {
position: relative;
height: 100%;
min-height: 100%;
}
.vn-sticky-themes__media-sticky {
position: sticky;
top: clamp(6rem, 14vh, 10rem);
height: clamp(440px, 75vh, 760px);
border-radius: 6px;
overflow: hidden;
}
.vn-sticky-themes__photo {
position: absolute;
inset: 0;
margin: 0;
pointer-events: none;
opacity: 0;
transition: opacity 700ms ease-out;
will-change: opacity;
}
.vn-sticky-themes__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.10);
transition: transform 900ms cubic-bezier(0.33, 1, 0.68, 1);
will-change: transform;
}
.vn-sticky-themes__photo.is-active {
opacity: 1;
}
.vn-sticky-themes__photo.is-active img {
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
.vn-sticky-themes__photo,
.vn-sticky-themes__photo img {
transition: none !important;
transform: none !important;
}
}
@media (max-width: 880px) {
.vn-sticky-themes__grid {
grid-template-columns: 1fr;
}
.vn-sticky-themes__text-col {
gap: 4rem;
}
.vn-sticky-themes__chapter {
min-height: auto;
opacity: 1;
filter: none;
}
.vn-sticky-themes__chapter-photo {
display: block;
margin: 0 0 1.5rem;
border-radius: 6px;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.vn-sticky-themes__chapter-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vn-sticky-themes__media-col {
display: none;
}
}
.vn-services,
.vn-trust,
.vn-faq,
.vn-cinematic-n,
.vn-galerie-reactive,
.vn-galerie-home,
.vn-sticky-themes,
.vn-intro,
.vn-stats,
.vn-final-cta {
color: var(--on-dark);
--ink-900: var(--on-dark-strong);
--ink-700: var(--on-dark);
--ink-500: var(--on-dark);
--ink-300: var(--on-dark-muted);
--ink-100: var(--on-dark-muted);
}
.vn-services [class*="__card"],
.vn-services [class*="__item"]:not(li),
.vn-trust [class*="__card"],
.vn-sticky-themes [class*="__card"] {
background: var(--surface-raised);
color: var(--on-dark);
}
.vn-faq__item {
background: transparent;
}
.vn-faq .vn-faq__question { color: var(--on-dark-strong); }
.vn-faq .vn-faq__answer { color: var(--on-dark); }
.vn-faq .vn-faq__q-icon,
.vn-faq .vn-faq__item[open] .vn-faq__q-icon { color: var(--on-dark-muted); }
.vn-faq .vn-faq__item,
.vn-faq .vn-faq__item:last-child { border-color: var(--divider-on-dark); }
.vn-sticky-themes .vn-sticky-themes__chapter-headline,
.vn-sticky-themes .vn-sticky-themes__headline { color: var(--on-dark-strong); }
.vn-sticky-themes .vn-sticky-themes__chapter-body,
.vn-sticky-themes .vn-sticky-themes__chapter-body p,
.vn-sticky-themes .vn-sticky-themes__chapter-highlights li,
.vn-sticky-themes .vn-sticky-themes__chapter-cta { color: var(--on-dark); }
.vn-sticky-themes .vn-sticky-themes__chapter-index,
.vn-sticky-themes .vn-sticky-themes__eyebrow,
.vn-sticky-themes .vn-sticky-themes__chapter-highlights li::before { color: var(--on-dark-muted); }
.vn-sticky-themes .vn-sticky-themes__eyebrow::before { background: var(--on-dark-muted); }
.vn-sticky-themes .vn-sticky-themes__chapter-cta { border-bottom-color: var(--divider-on-dark); }
.vn-sticky-themes .vn-sticky-themes__chapter-cta:hover { border-bottom-color: var(--on-dark); }
.vn-trust__headline { color: var(--on-dark-strong); }
.vn-trust__intro,
.vn-trust__aggregate { color: var(--on-dark); }
.vn-trust__eyebrow { color: var(--on-dark-muted); }
.vn-trust__eyebrow::before { background: var(--on-dark-muted); }
.vn-trust [class*="__card"],
.vn-trust__card { background: var(--surface-raised); }
.vn-trust [class*="__card"] *,
.vn-trust__card * { color: var(--on-dark); }
.vn-trust [class*="__quote"] { color: var(--on-dark-strong); }
.vn-trust [class*="__author"] { color: var(--on-dark-muted); }
.vn-services .vn-services__headline { color: var(--on-dark-strong); }
.vn-services .vn-services__subline { color: var(--on-dark); }
.vn-services .vn-services__eyebrow { color: var(--on-dark-muted); }
.vn-services .vn-services__eyebrow::before,
.vn-services .vn-services__eyebrow::after { background: var(--on-dark-muted); }
.vn-cinematic-n h2,
.vn-cinematic-n h3 { color: var(--on-dark-strong); }
.vn-cinematic-n p { color: var(--on-dark); }
.vn-intro .vn-intro__headline { color: var(--on-dark-strong); }
.vn-intro .vn-intro__eyebrow { color: var(--on-dark-muted); }
.vn-intro .vn-intro__eyebrow::before { background: var(--on-dark-muted); }
.vn-stats__item [class*="__value"] { color: var(--on-dark-strong); }
.vn-stats__item [class*="__label"] { color: var(--on-dark-muted); }
.vn-faq h2, .vn-faq h3,
.vn-trust h2, .vn-trust h3,
.vn-services h2, .vn-services h3,
.vn-sticky-themes h2, .vn-sticky-themes h3,
.vn-galerie-reactive h2, .vn-galerie-reactive h3,
.vn-galerie-home h2, .vn-galerie-home h3 { color: var(--on-dark-strong); }
.vn-intro__cta,
.vn-sticky-themes__chapter-cta {
--cta-color: var(--on-dark);
color: var(--cta-color);
font-family: var(--font-body);
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.01em;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0 0 0.5rem;
border: 0;
border-bottom: 1px solid var(--on-dark-muted);
transition: border-color 280ms ease;
}
.vn-intro__cta:hover,
.vn-sticky-themes__chapter-cta:hover {
border-bottom-color: var(--on-dark);
color: var(--on-dark);
}
.vn-intro__cta::after {
content: "\27F6";
font-size: 1.45em;
line-height: 1;
font-weight: 300;
margin-left: 0.4rem;
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vn-intro__cta:hover::after { transform: translateX(6px); }
.vn-intro__cta-arrow { display: none; }
.vn-services--clean .vn-services__item-inner {
grid-template-columns: 1fr auto;
}
.vn-services--clean [class*="__item"]:not(li) {
background: transparent;
}
.vn-services--clean .vn-services__item {
border-top-color: var(--divider-on-dark);
}
.vn-services--clean .vn-services__item:last-child {
border-bottom-color: var(--divider-on-dark);
}
.vn-services--clean .vn-services__item-title { color: var(--on-dark-strong); }
.vn-services--clean .vn-services__item-title a { color: inherit; }
.vn-services--clean .vn-services__item-desc { color: var(--on-dark); }
.vn-services--clean .vn-services__item-accent { color: var(--on-dark-muted); }
.vn-services--clean .vn-services__item-arrow {
color: var(--on-dark-muted);
border-color: var(--divider-on-dark);
}
.vn-services--clean .vn-services__item:hover .vn-services__item-arrow,
.vn-services--clean .vn-services__item.is-active .vn-services__item-arrow {
background: var(--on-dark-strong);
border-color: var(--on-dark-strong);
color: var(--sage-900);
transform: rotate(-25deg);
}
.vn-services--clean .vn-services__media {
background: var(--surface-raised);
}
.vn-services--clean .vn-services__photo-label { display: none; }
.vn-services--clean .vn-services__item-title {
font-size: clamp(1.75rem, 3vw, 2.6rem);
font-style: italic;
font-variation-settings: "opsz" 72;
line-height: 1.05;
letter-spacing: -0.02em;
}
.vn-services--clean .vn-services__item-photo {
display: none;
margin: 1rem 0 0;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 6px;
background: var(--surface-raised);
}
.vn-services--clean .vn-services__item-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 960px) {
.vn-services--clean .vn-services__switcher {
grid-template-columns: 1fr;
gap: 0;
}
.vn-services--clean .vn-services__media {
display: none;
}
.vn-services--clean .vn-services__item-photo {
display: block;
}
.vn-services--clean .vn-services__item-desc {
max-height: none;
opacity: 1;
margin-top: 0.5rem;
overflow: visible;
}
.vn-services--clean .vn-services__item-accent {
max-height: none;
opacity: 1;
margin-top: 0.65rem;
}
.vn-services--clean .vn-services__item-inner,
.vn-services--clean .vn-services__item.is-active .vn-services__item-inner {
padding: 2rem 0 2.25rem;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"title arrow"
"photo photo"
"desc desc";
gap: 0.5rem 1rem;
align-items: center;
}
.vn-services--clean .vn-services__item-body {
display: contents;
}
.vn-services--clean .vn-services__item-title {
grid-area: title;
font-size: clamp(1.6rem, 5.5vw, 2.2rem);
padding-right: 0;
}
.vn-services--clean .vn-services__item-photo {
grid-area: photo;
}
.vn-services--clean .vn-services__item-desc {
grid-area: desc;
}
.vn-services--clean .vn-services__item-arrow {
grid-area: arrow;
position: static;
align-self: center;
justify-self: end;
}
}
.vn-hero--page {
position: relative;
height: auto;
min-height: 100vh;
padding: 0;
background-color: var(--sage-800);
background-image: var(--vn-grain);
background-attachment: fixed;
background-size: 360px 360px;
background-repeat: repeat;
overflow: hidden;
isolation: isolate;
}
.vn-hero--page .vn-hero-logo__sticky {
position: relative;
height: 100vh;
width: 100%;
min-height: 640px;
padding: clamp(1rem, 2.5vw, 3rem);
overflow: hidden;
}
.vn-page-hero__photo {
position: absolute;
inset: clamp(1rem, 2.5vw, 3rem);
margin: 0;
z-index: 1;
overflow: hidden;
border-radius: 12px;
}
.vn-page-hero__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vn-page-hero__photo::before {
content: "";
position: absolute;
inset: 0;
background: var(--sage-800);
mix-blend-mode: multiply;
opacity: 0.35;
pointer-events: none;
z-index: 1;
}
.vn-page-hero__photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
color-mix(in srgb, var(--sage-700) 95%, transparent) 0%,
color-mix(in srgb, var(--sage-700) 70%, transparent) 30%,
color-mix(in srgb, var(--sage-700) 25%, transparent) 60%,
transparent 90%
);
pointer-events: none;
}
.vn-hero--page .vn-hero-logo__description,
.vn-hero--page .vn-hero-logo__description .vn-italic {
color: var(--paper);
}
.vn-hero--page .vn-hero-logo__inner,
.vn-hero--page .vn-hero-logo__award {
z-index: 5;
}
.vn-hero--page .vn-hero-logo__inner {
--logo-shift: 0px;
transform: translateY(0);
justify-content: flex-end;
padding-bottom: clamp(3rem, 6vw, 5rem);
gap: clamp(0.4rem, 0.8vw, 0.75rem);
}
.vn-hero--page .vn-hero-logo__wordmark {
--logo-shift: 0px;
transform: translateY(0);
gap: 0;
line-height: 0.88;
}
.vn-hero--page .vn-hero-logo__italic,
.vn-hero--page .vn-hero-logo__mark {
line-height: 0.88;
}
.vn-hero--page .vn-hero-logo__description,
.vn-hero--page .vn-hero-logo__cta,
.vn-hero--page .vn-hero-logo__award {
--unfold-progress: 1;
opacity: 1;
transform: translateY(0);
}
.vn-hero--page .vn-hero-logo__description {
display: block;
font-family: var(--font-body);
font-size: clamp(1.2rem, 1.7vw, 1.6rem);
line-height: 1.45;
color: var(--on-dark-muted);
letter-spacing: 0.01em;
font-weight: 400;
max-width: 46rem;
margin: clamp(0.65rem, 1.2vw, 1rem) 0 0;
opacity: 1;
transform: none;
}
.vn-hero--page .vn-hero-logo__description:empty {
display: none;
}
@media (max-width: 768px) {
.vn-hero--page .vn-hero-logo__award {
top: 13%;
bottom: auto;
}
}
@media (max-width: 768px) {
.vn-hero--page {
min-height: 90vh;
}
.vn-hero--page .vn-hero-logo__sticky {
height: 90vh;
min-height: 620px;
}
.vn-hero--page .vn-hero-logo__inner {
padding-left: clamp(1.5rem, 6vw, 2.5rem);
padding-right: clamp(1.5rem, 6vw, 2.5rem);
padding-bottom: clamp(4rem, 10vw, 6.5rem);
}
.vn-hero--page .vn-hero-logo__breadcrumb {
font-size: 0.58rem;
letter-spacing: 0.1em;
gap: 0.18rem 0.45rem;
margin: 0 0 0.35rem;
}
.vn-hero--page .vn-hero-logo__breadcrumb > a:first-of-type,
.vn-hero--page .vn-hero-logo__breadcrumb > a:first-of-type + span {
display: none;
}
.vn-hero--page .vn-hero-logo__italic {
font-size: clamp(2rem, 9vw, 4.5rem);
}
.vn-hero--page .vn-hero-logo__mark {
font-size: clamp(2.5rem, 12vw, 5.5rem);
letter-spacing: -0.025em;
word-break: break-word;
hyphens: auto;
}
}
[data-section] p.vn-hero-logo__breadcrumb,
.vn-hero-logo__breadcrumb {
position: relative;
z-index: 5;
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.66rem;
font-weight: 600;
color: var(--on-dark-strong);
opacity: 1;
max-width: none;
line-height: 1.2;
margin: 0 0 0.8rem;
text-align: center;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2rem 0.55rem;
justify-content: center;
text-shadow: 0 1px 14px color-mix(in srgb, var(--sage-950) 75%, transparent);
}
.vn-hero-logo__breadcrumb a,
.vn-hero-logo__breadcrumb .vn-hero-logo__breadcrumb-current {
color: var(--on-dark-strong);
text-decoration: none;
transition: border-color 200ms ease;
border-bottom: 1px solid transparent;
white-space: nowrap;
}
.vn-hero-logo__breadcrumb a:hover {
border-bottom-color: var(--on-dark-strong);
}
.vn-hero-logo__breadcrumb-current {
color: inherit;
}
.vn-hero--page .vn-hero-logo__cta {
color: var(--paper);
border-bottom-color: var(--paper);
}
.vn-hero--page .vn-hero-logo__cta-hint,
.vn-hero--page .vn-hero-logo__cta-sep,
.vn-hero--page .vn-hero-logo__cta-label,
.vn-hero--page .vn-hero-logo__cta-arrow {
color: var(--paper);
opacity: 1;
}
.vn-hero--page .vn-hero-logo__cta:hover {
border-bottom-color: var(--paper);
}
.vn-muehle-peter {
max-width: var(--page-max);
margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.vn-muehle-peter__inner {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
max-width: 96rem;
margin: 0 auto;
}
@media (max-width: 880px) {
.vn-muehle-peter__inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
.vn-muehle-peter__col-text {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
[data-section] p.vn-muehle-peter__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
max-width: none;
line-height: 1.4;
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-muehle-peter__eyebrow::before {
content: "";
width: 2.5rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-muehle-peter__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 3.8vw, 3rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
max-width: 20ch;
text-wrap: balance;
margin: 0;
}
.vn-muehle-peter__body {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 42rem;
}
.vn-muehle-peter__body p {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.75;
color: var(--on-dark);
margin: 0;
}
.vn-muehle-peter__col-img {
margin: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.vn-muehle-peter__col-img img {
width: 100%;
height: auto;
border-radius: 6px;
display: block;
}
.vn-muehle-peter__caption {
display: flex;
flex-direction: column;
gap: 0.2rem;
font-family: var(--font-body);
}
.vn-muehle-peter__caption-name {
font-size: 0.95rem;
color: var(--on-dark-strong);
font-weight: 500;
}
.vn-muehle-peter__caption-line {
font-size: 0.82rem;
color: var(--on-dark-muted);
letter-spacing: 0.02em;
}
.vn-muehle-zahlen {
max-width: var(--page-max);
margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.vn-muehle-zahlen__inner {
max-width: 96rem;
margin: 0 auto;
}
.vn-muehle-zahlen__header {
max-width: 56rem;
margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.vn-muehle-zahlen__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-muehle-zahlen__eyebrow::before {
content: "";
width: 2.5rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-muehle-zahlen__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(1.85rem, 3.5vw, 2.85rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
max-width: 22ch;
text-wrap: balance;
margin: 0 0 1rem;
}
.vn-muehle-zahlen__subline {
font-family: var(--font-body);
font-size: clamp(1rem, 1.4vw, 1.1rem);
line-height: 1.6;
color: var(--on-dark);
max-width: 52ch;
margin: 0;
}
.vn-muehle-zahlen__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 4vw, 4rem);
}
@media (max-width: 760px) {
.vn-muehle-zahlen__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.vn-muehle-zahlen__grid { grid-template-columns: 1fr; }
}
.vn-muehle-zahlen__item {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1.5rem 0 1.5rem 1.5rem;
border-left: 1px solid var(--divider-on-dark);
}
.vn-muehle-zahlen__number {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2.5rem, 4.5vw, 3.75rem);
line-height: 1;
letter-spacing: -0.025em;
color: var(--on-dark-strong);
}
.vn-muehle-zahlen__label {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.5;
color: var(--on-dark-muted);
letter-spacing: 0.01em;
max-width: 22ch;
}
.vn-muehle-orf {
max-width: var(--page-max);
margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.vn-muehle-orf__header {
max-width: 56rem;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
text-align: center;
}
.vn-muehle-orf__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-muehle-orf__eyebrow::before {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-muehle-orf__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 3.8vw, 3.4rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
margin: 0;
text-wrap: balance;
}
.vn-muehle-orf__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(2rem, 4vw, 4rem);
align-items: start;
margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 880px) {
.vn-muehle-orf__grid { grid-template-columns: 1fr; }
}
.vn-muehle-orf__photo {
margin: 0;
overflow: hidden;
border-radius: 6px;
background: var(--surface-raised);
}
.vn-muehle-orf__photo img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.vn-muehle-orf__photo figcaption {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--on-dark-muted);
padding: 0.85rem 0.25rem 0;
letter-spacing: 0.01em;
}
.vn-muehle-orf__body p {
font-family: var(--font-body);
font-size: 1.125rem;
line-height: 1.7;
color: var(--on-dark);
margin: 0 0 1.25rem;
}
.vn-muehle-orf__jury {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--divider-on-dark);
}
.vn-muehle-orf__jury-label {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.72rem;
font-weight: 600;
color: var(--on-dark-muted);
margin: 0 0 0.85rem;
}
.vn-muehle-orf__jury-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.25rem;
}
.vn-muehle-orf__jury-list li {
font-family: var(--font-display);
font-style: italic;
font-variation-settings: "opsz" 36;
font-size: 1.05rem;
color: var(--sage-300);
}
.vn-muehle-orf__jury-list li + li::before {
content: "·";
margin-right: 1.25rem;
color: var(--on-dark-muted);
}
.vn-muehle-orf__sidebar {
max-width: 38rem;
margin: 0 auto;
}
.vn-muehle-orf__photo--side {
max-width: 100%;
}
.vn-muehle-innen {
max-width: var(--page-max);
margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.vn-muehle-innen__header {
max-width: 56rem;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
text-align: center;
}
.vn-muehle-innen__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-muehle-innen__eyebrow::before {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-muehle-innen__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 3.8vw, 3.4rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
margin: 0 0 1rem;
text-wrap: balance;
}
.vn-muehle-innen__subline {
font-family: var(--font-body);
font-size: clamp(1rem, 1.4vw, 1.15rem);
line-height: 1.6;
color: var(--on-dark);
max-width: 42rem;
margin: 0 auto;
}
.vn-muehle-innen__spread {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(1.5rem, 3vw, 2.5rem);
margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
@media (max-width: 880px) {
.vn-muehle-innen__spread { grid-template-columns: 1fr; }
}
.vn-muehle-innen__photo {
margin: 0;
overflow: hidden;
border-radius: 6px;
background: var(--surface-raised);
}
.vn-muehle-innen__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 4 / 3;
}
.vn-muehle-innen__stations {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(2rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem);
max-width: 80rem;
margin-inline: auto;
}
@media (max-width: 760px) {
.vn-muehle-innen__stations { grid-template-columns: 1fr; }
}
.vn-muehle-innen__station {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.1rem;
align-items: start;
}
.vn-muehle-innen__station-num {
font-family: var(--font-display);
font-style: italic;
font-variation-settings: "opsz" 60;
font-size: 2.2rem;
line-height: 1;
color: var(--sage-300);
font-feature-settings: "tnum";
padding-top: 0.05em;
}
.vn-muehle-innen__station-title {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 60;
font-size: clamp(1.3rem, 1.8vw, 1.65rem);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--on-dark-strong);
margin: 0 0 0.6rem;
}
.vn-muehle-innen__station-body p {
font-family: var(--font-body);
font-size: 1.025rem;
line-height: 1.65;
color: var(--on-dark);
margin: 0;
}
.vn-muehle-funktion {
max-width: var(--page-max);
margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
background: var(--sage-900);
}
.vn-muehle-funktion__header {
max-width: 56rem;
margin: 0 auto clamp(3rem, 5vw, 4.5rem);
text-align: center;
}
.vn-muehle-funktion__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-muehle-funktion__eyebrow::before {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-muehle-funktion__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 3.8vw, 3.4rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
margin: 0 0 1rem;
text-wrap: balance;
}
.vn-muehle-funktion__body {
font-family: var(--font-body);
font-size: clamp(1.025rem, 1.4vw, 1.18rem);
line-height: 1.7;
color: var(--on-dark);
max-width: 44rem;
margin: 0 auto;
}
.vn-muehle-funktion__steps {
list-style: none;
padding: 0;
margin: 0 0 clamp(3rem, 5vw, 4.5rem);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1.5rem, 2vw, 2.25rem);
counter-reset: muehle-funktion;
}
@media (max-width: 1000px) {
.vn-muehle-funktion__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.vn-muehle-funktion__steps { grid-template-columns: 1fr; }
}
.vn-muehle-funktion__step {
position: relative;
padding: 1.5rem 1.5rem 1.75rem;
border-radius: 6px;
background: var(--sage-800);
border: 1px solid var(--divider-on-dark);
}
.vn-muehle-funktion__step-num {
display: inline-block;
font-family: var(--font-display);
font-style: italic;
font-variation-settings: "opsz" 60;
font-size: 1.85rem;
line-height: 1;
color: var(--sage-300);
margin-bottom: 0.85rem;
font-feature-settings: "tnum";
}
.vn-muehle-funktion__step-title {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 60;
font-size: 1.3rem;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--on-dark-strong);
margin: 0 0 0.65rem;
}
.vn-muehle-funktion__step p {
font-family: var(--font-body);
font-size: 0.98rem;
line-height: 1.6;
color: var(--on-dark);
margin: 0;
}
.vn-muehle-funktion__photo {
margin: 0;
max-width: 78rem;
margin-inline: auto;
overflow: hidden;
border-radius: 6px;
background: var(--surface-raised);
}
.vn-muehle-funktion__photo img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.vn-muehle-funktion__photo figcaption {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--on-dark-muted);
padding: 0.85rem 0.25rem 0;
text-align: center;
letter-spacing: 0.01em;
}
.vn-muehle-jause {
max-width: var(--page-max);
margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.vn-muehle-jause__inner {
max-width: 84rem;
margin: 0 auto;
}
.vn-muehle-jause__header {
max-width: 56rem;
margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
[data-section="muehle-jause"] p.vn-muehle-jause__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
max-width: none;
line-height: 1.4;
margin: 0 0 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-muehle-jause__eyebrow::before {
content: "";
width: 2.5rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-muehle-jause__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 3.8vw, 3rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
max-width: 24ch;
text-wrap: balance;
margin: 0 0 1.25rem;
}
[data-section="muehle-jause"] p.vn-muehle-jause__intro {
font-family: var(--font-body);
font-size: 1.125rem;
line-height: 1.65;
color: var(--on-dark);
max-width: 48rem;
margin: 0;
}
.vn-muehle-jause__grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
}
@media (max-width: 880px) {
.vn-muehle-jause__grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
.vn-muehle-jause__menu {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
border-top: 1px solid var(--divider-on-dark);
}
.vn-muehle-jause__item {
display: grid;
grid-template-columns: 1fr auto;
gap: 1.5rem;
align-items: baseline;
padding: 1.25rem 0;
border-bottom: 1px solid var(--divider-on-dark);
}
.vn-muehle-jause__item dt {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 36;
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
line-height: 1.25;
color: var(--on-dark-strong);
letter-spacing: -0.01em;
}
.vn-muehle-jause__item dd {
font-family: var(--font-body);
font-size: 0.95rem;
font-style: italic;
color: var(--on-dark-muted);
margin: 0;
text-align: right;
max-width: 22ch;
}
.vn-muehle-jause__visit {
display: flex;
flex-direction: column;
gap: 2rem;
padding: clamp(1.75rem, 3vw, 2.5rem);
background: color-mix(in srgb, var(--sage-900) 50%, transparent);
border: 1px solid var(--divider-on-dark);
}
.vn-muehle-jause__visit-note {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.55;
color: var(--on-dark);
margin: 0;
}
.vn-muehle-jause__facts {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0;
}
.vn-muehle-jause__facts > div {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.vn-muehle-jause__facts dt {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.7rem;
font-weight: 600;
color: var(--on-dark-muted);
}
.vn-muehle-jause__facts dd {
font-family: var(--font-body);
font-size: 1rem;
color: var(--on-dark-strong);
margin: 0;
}
.vn-muehle-jause__cta {
margin-top: 0.5rem;
align-self: flex-start;
}
.vn-muehle-erlebnisweg {
max-width: var(--page-max);
margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.vn-muehle-erlebnisweg__inner {
max-width: 84rem;
margin: 0 auto;
}
.vn-muehle-erlebnisweg__header {
max-width: 56rem;
margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
[data-section="muehle-erlebnisweg"] p.vn-muehle-erlebnisweg__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
max-width: none;
line-height: 1.4;
margin: 0 0 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-muehle-erlebnisweg__eyebrow::before {
content: "";
width: 2.5rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-muehle-erlebnisweg__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 3.8vw, 3rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
max-width: 24ch;
text-wrap: balance;
margin: 0 0 1.25rem;
}
[data-section="muehle-erlebnisweg"] p.vn-muehle-erlebnisweg__intro {
font-family: var(--font-body);
font-size: 1.125rem;
line-height: 1.65;
color: var(--on-dark);
max-width: 48rem;
margin: 0;
}
.vn-muehle-erlebnisweg__grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
}
@media (max-width: 880px) {
.vn-muehle-erlebnisweg__grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
.vn-muehle-erlebnisweg__stations {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--divider-on-dark);
}
.vn-muehle-erlebnisweg__station {
display: grid;
grid-template-columns: 4rem 1fr;
gap: 1.5rem;
align-items: baseline;
padding: 1.25rem 0;
border-bottom: 1px solid var(--divider-on-dark);
}
.vn-muehle-erlebnisweg__station-num {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 36;
font-size: 1.4rem;
color: var(--on-dark-muted);
font-style: italic;
}
.vn-muehle-erlebnisweg__station-body {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
[data-section="muehle-erlebnisweg"] p.vn-muehle-erlebnisweg__station-name {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 36;
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
color: var(--on-dark-strong);
max-width: none;
line-height: 1.25;
margin: 0;
}
[data-section="muehle-erlebnisweg"] p.vn-muehle-erlebnisweg__station-where {
font-family: var(--font-body);
font-style: italic;
font-size: 0.95rem;
color: var(--on-dark-muted);
max-width: none;
line-height: 1.4;
margin: 0;
}
.vn-muehle-erlebnisweg__sidebar {
display: flex;
flex-direction: column;
gap: 1.75rem;
padding: clamp(1.75rem, 3vw, 2.5rem);
background: color-mix(in srgb, var(--sage-900) 50%, transparent);
border: 1px solid var(--divider-on-dark);
}
.vn-muehle-erlebnisweg__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem 1.5rem;
margin: 0;
}
.vn-muehle-erlebnisweg__stats > div {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.vn-muehle-erlebnisweg__stats dt {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.66rem;
font-weight: 600;
color: var(--on-dark-muted);
}
.vn-muehle-erlebnisweg__stats dd {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 36;
font-size: 1.1rem;
color: var(--on-dark-strong);
margin: 0;
line-height: 1.2;
}
[data-section="muehle-erlebnisweg"] p.vn-muehle-erlebnisweg__address-label {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.66rem;
font-weight: 600;
color: var(--on-dark-muted);
max-width: none;
margin: 0;
}
.vn-muehle-erlebnisweg__address {
font-family: var(--font-body);
font-size: 1rem;
font-style: normal;
line-height: 1.5;
color: var(--on-dark-strong);
margin: -0.5rem 0 0;
}
.vn-muehle-erlebnisweg__external {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--on-dark-strong);
text-decoration: none;
border-bottom: 1px solid var(--on-dark-muted);
padding-bottom: 0.3rem;
align-self: flex-start;
transition: border-color 0.3s ease, gap 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.vn-muehle-erlebnisweg__external:hover {
border-bottom-color: var(--on-dark-strong);
gap: 0.7rem;
}
.vn-anerk {
max-width: var(--page-max);
margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.vn-anerk__inner {
max-width: 84rem;
margin: 0 auto;
}
.vn-anerk__header {
max-width: 56rem;
margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
[data-section="muehle-anerkennung"] p.vn-anerk__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
max-width: none;
line-height: 1.4;
margin: 0 0 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-anerk__eyebrow::before {
content: "";
width: 2.5rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-anerk__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 3.8vw, 3rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
max-width: 28ch;
text-wrap: balance;
margin: 0;
}
[data-section="muehle-anerkennung"] p {
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.7;
color: var(--on-dark);
margin: 0 0 1rem;
}
[data-section="muehle-anerkennung"] p:last-child {
margin-bottom: 0;
}
.vn-anerk__spread {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 4vw, 4rem);
align-items: center;
margin: 0 0 clamp(2.5rem, 4vw, 3.5rem);
}
@media (max-width: 880px) {
.vn-anerk__spread {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.vn-anerk__photo {
margin: 0;
overflow: hidden;
}
.vn-anerk__photo img {
width: 100%;
height: auto;
display: block;
}
.vn-anerk__body {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 48rem;
}
.vn-anerk__body--center {
margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
text-align: left;
}
.vn-anerk__quote {
max-width: 56rem;
margin: clamp(2.5rem, 4vw, 3.5rem) auto;
padding: 0;
border: 0;
text-align: center;
}
.vn-anerk__quote p {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(1.5rem, 2.8vw, 2.25rem);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--on-dark-strong);
margin: 0 0 1.25rem;
text-wrap: balance;
}
.vn-anerk__quote cite {
font-family: var(--font-body);
font-style: normal;
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--on-dark-muted);
}
.vn-anerk__facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem 2rem;
margin: clamp(3rem, 6vw, 4.5rem) 0 0;
padding: clamp(1.75rem, 3vw, 2.5rem) 0 0;
border-top: 1px solid var(--divider-on-dark);
}
@media (max-width: 880px) {
.vn-anerk__facts {
grid-template-columns: repeat(2, 1fr);
}
}
.vn-anerk__facts > div {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.vn-anerk__facts dt {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.7rem;
font-weight: 600;
color: var(--on-dark-muted);
}
.vn-anerk__facts dd {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 36;
font-size: 1.05rem;
color: var(--on-dark-strong);
margin: 0;
line-height: 1.3;
}
.vn-final-cta--mcta {
background: var(--sage-950);
color: var(--on-dark);
padding: clamp(7rem, 12vw, 9rem) var(--gutter);
}
.vn-final-cta--mcta .vn-final-cta__eyebrow {
color: var(--sage-300);
}
.vn-final-cta--mcta .vn-final-cta__eyebrow::before {
background: var(--sage-300);
}
.vn-final-cta--mcta .vn-final-cta__headline {
color: var(--on-dark-strong);
}
.vn-final-cta--mcta .vn-final-cta__headline .vn-italic {
color: var(--sage-300);
}
[data-section="muehle-cta"] p.vn-final-cta__body {
color: var(--on-dark);
}
.vn-final-cta--mcta .vn-button,
.vn-final-cta--mcta .vn-button--primary {
background: transparent;
color: var(--on-dark-strong);
border-bottom-color: var(--sage-300);
padding: 0 0 0.5rem;
}
.vn-final-cta--mcta .vn-button:hover,
.vn-final-cta--mcta .vn-button--primary:hover,
.vn-final-cta--mcta .vn-button--primary:focus-visible {
background: transparent;
color: var(--on-dark-strong);
border-bottom-color: var(--on-dark-strong);
}
.vn-rmenu {
max-width: var(--page-max);
margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.vn-rmenu__inner {
max-width: 64rem;
margin: 0 auto;
}
.vn-rmenu__header {
max-width: 50rem;
margin: 0 auto clamp(3rem, 6vw, 4.5rem);
text-align: center;
}
.vn-rmenu p.vn-rmenu__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
max-width: none;
line-height: 1.4;
margin: 0 0 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-rmenu__eyebrow::before,
.vn-rmenu__eyebrow::after {
content: "";
display: inline-block;
width: 2rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-rmenu__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2.25rem, 5vw, 4.5rem);
line-height: 1.0;
letter-spacing: -0.025em;
color: var(--on-dark-strong);
max-width: 22ch;
text-wrap: balance;
margin: 0 auto 1rem;
}
.vn-rmenu p.vn-rmenu__subline {
font-family: var(--font-body);
font-size: clamp(1rem, 1.5vw, 1.15rem);
line-height: 1.55;
color: var(--on-dark);
max-width: 38rem;
margin: 0 auto;
}
.vn-rmenu__list {
display: flex;
flex-direction: column;
margin: 0;
}
.vn-rmenu__item {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: baseline;
padding: 2.25rem 0;
border-bottom: 1px solid var(--divider-on-dark);
}
@media (max-width: 720px) {
.vn-rmenu__item {
grid-template-columns: 1fr;
gap: 0.65rem;
padding: 1.75rem 0;
}
}
.vn-rmenu__item dt {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(1.6rem, 2.6vw, 2.15rem);
line-height: 1.15;
color: var(--on-dark-strong);
letter-spacing: -0.015em;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.25rem;
flex-wrap: wrap;
}
.vn-rmenu__item-name {
flex: 1 1 auto;
}
.vn-rmenu__item-price {
font-family: var(--font-body);
font-size: clamp(1rem, 1.4vw, 1.15rem);
font-weight: 500;
letter-spacing: 0.01em;
color: var(--sage-300);
white-space: nowrap;
}
.vn-rmenu__item dd {
font-family: var(--font-body);
font-size: 1.15rem;
line-height: 1.6;
color: var(--on-dark);
margin: 0.5rem 0 0;
}
.vn-rmenu p.vn-rmenu__note {
font-family: var(--font-body);
font-style: italic;
font-size: 0.92rem;
line-height: 1.55;
color: var(--on-dark);
max-width: 48rem;
margin: 2rem auto 0;
text-align: center;
}
.vn-rmenu__item--seasonal .vn-rmenu__item-name {
color: var(--sage-300);
font-style: italic;
}
.vn-rmenu__group {
display: contents;
}
.vn-rmenu__cat {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 40;
font-style: italic;
text-transform: none;
letter-spacing: -0.005em;
font-size: clamp(1.85rem, 3.6vw, 2.85rem);
line-height: 1;
color: var(--sage-300);
margin: clamp(3rem, 5.5vw, 4.5rem) 0 0;
padding: 0 0 1.1rem;
border-bottom: 1px solid var(--divider-on-dark);
}
.vn-rmenu__group:first-child .vn-rmenu__cat {
margin-top: 0;
}
.vn-rmenu__item--price {
display: block;
padding: 1.5rem 0;
}
.vn-rmenu__item--price dt {
font-size: clamp(1.15rem, 1.7vw, 1.5rem);
font-variation-settings: "opsz" 40;
}
.vn-rmenu__allergene {
display: inline;
margin-left: 0.7rem;
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.16em;
color: var(--on-dark);
white-space: nowrap;
vertical-align: middle;
}
.vn-rmenu__legend {
margin-top: clamp(2.75rem, 5vw, 3.75rem);
padding-top: clamp(1.5rem, 3vw, 2rem);
border-top: 1px solid var(--divider-on-dark);
}
.vn-rmenu p.vn-rmenu__legend-title {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.82rem;
font-weight: 600;
color: var(--on-dark-strong);
margin: 0 0 1.5rem;
}
.vn-rmenu__legend-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
gap: 0.75rem 2rem;
}
.vn-rmenu__legend-item {
display: flex;
align-items: baseline;
gap: 0.7rem;
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.4;
color: var(--on-dark);
}
.vn-rmenu__legend-code {
flex: 0 0 auto;
min-width: 1.5rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--on-dark-strong);
}
.vn-rphotomenu {
max-width: var(--page-max);
margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.vn-rphotomenu__inner {
max-width: 96rem;
margin: 0 auto;
}
.vn-rphotomenu__header {
max-width: 48rem;
margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
[data-section="restaurant-photomenu"] p.vn-rphotomenu__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
max-width: none;
line-height: 1.4;
margin: 0 0 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-rphotomenu__eyebrow::before {
content: "";
width: 2.5rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-rphotomenu__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 3.8vw, 3rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-rphotomenu__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 960px) {
.vn-rphotomenu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.vn-rphotomenu__grid { grid-template-columns: 1fr; }
}
.vn-rphotomenu__card {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vn-rphotomenu__photo {
margin: 0;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.vn-rphotomenu__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vn-rphotomenu__body {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.vn-rphotomenu__name {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 48;
font-size: clamp(1.2rem, 1.8vw, 1.45rem);
line-height: 1.2;
color: var(--on-dark-strong);
letter-spacing: -0.01em;
margin: 0;
}
[data-section="restaurant-photomenu"] p.vn-rphotomenu__desc {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.55;
color: var(--on-dark);
margin: 0;
}
.vn-rmenu:has(+ .vn-rgalerie) {
padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.vn-rgalerie {
padding: 0 0 clamp(3rem, 6vw, 5rem);
overflow: hidden;
}
.vn-rgalerie__header {
max-width: var(--page-max);
margin: 0 auto clamp(2rem, 4vw, 3rem);
padding: 0 var(--gutter);
}
[data-section="restaurant-galerie"] p.vn-rgalerie__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
max-width: none;
line-height: 1.4;
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-rgalerie__eyebrow::before {
content: "";
width: 2.5rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-rgalerie__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 3.8vw, 3rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-rgalerie__viewport {
width: 100%;
overflow: hidden;
cursor: grab;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.vn-rgalerie__viewport.is-dragging {
cursor: grabbing;
}
.vn-rgalerie__viewport img {
-webkit-user-drag: none;
pointer-events: none;
}
.vn-rgalerie__track {
display: flex;
gap: clamp(1rem, 2vw, 1.5rem);
will-change: transform;
}
.vn-rgalerie__item {
flex: 0 0 auto;
width: clamp(26rem, 44vw, 48rem);
aspect-ratio: 16 / 9;
margin: 0;
overflow: hidden;
}
.vn-rgalerie__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vn-sticky-themes__chapter-meta {
margin-top: 0.75rem;
font-family: var(--font-display);
font-style: italic;
font-size: 1rem;
color: var(--sage-300);
letter-spacing: 0.01em;
}
.vn-occasions {
color: var(--on-dark);
padding: clamp(5rem, 10vw, 9rem) 0 clamp(5rem, 10vw, 9rem);
}
.vn-occasions__inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.vn-occasions__header {
text-align: center;
max-width: 64rem;
margin: 0 auto clamp(3rem, 6vw, 5rem);
}
.vn-occasions p.vn-occasions__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.85rem;
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0 0 1.25rem;
}
.vn-occasions__eyebrow::before,
.vn-occasions__eyebrow::after {
content: '';
width: 2.4rem;
height: 1px;
background: var(--on-dark-muted);
opacity: 0.7;
}
.vn-occasions__headline {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(2.25rem, 5.5vw, 4.5rem);
line-height: 1.04;
letter-spacing: -0.015em;
color: var(--on-dark-strong);
margin: 0 0 1.5rem;
}
.vn-occasions p.vn-occasions__subline {
font-family: var(--font-body);
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: var(--on-dark);
max-width: 48rem;
margin: 0 auto;
}
.vn-occasions__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 3.5rem);
}
.vn-occasions__grid--three {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) {
.vn-occasions__grid--three {
grid-template-columns: 1fr;
gap: clamp(2.5rem, 6vw, 4rem);
}
}
@media (max-width: 880px) {
.vn-occasions__grid {
grid-template-columns: 1fr;
gap: clamp(2.5rem, 6vw, 4rem);
}
}
.vn-occasions__card--text {
padding: clamp(2rem, 3vw, 2.5rem) clamp(1.75rem, 2.5vw, 2rem);
background: color-mix(in srgb, var(--sage-900) 35%, transparent);
border: 1px solid var(--divider-on-dark);
}
.vn-occasions__card {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.vn-occasions__photo {
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--surface-raised);
}
.vn-occasions__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s var(--vn-ease-out, ease-out);
}
.vn-occasions__card:hover .vn-occasions__photo img {
transform: scale(1.03);
}
.vn-occasions__body {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 0 0.25rem;
}
.vn-occasions p.vn-occasions__meta {
font-family: var(--font-display);
font-style: italic;
font-size: 0.95rem;
color: var(--sage-300);
letter-spacing: 0.02em;
margin: 0;
}
.vn-occasions__title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.5rem, 2.4vw, 2rem);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-occasions p.vn-occasions__text {
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.65;
color: var(--on-dark);
margin: 0;
}
.vn-options {
color: var(--on-dark);
padding: clamp(5rem, 10vw, 9rem) 0;
}
.vn-options__inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.vn-options__header {
text-align: center;
max-width: 64rem;
margin: 0 auto clamp(3rem, 6vw, 5rem);
}
[data-section="uebernachten-optionen"] p.vn-options__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.85rem;
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0 0 1.25rem;
}
.vn-options__eyebrow::before,
.vn-options__eyebrow::after {
content: '';
width: 2.4rem;
height: 1px;
background: var(--on-dark-muted);
opacity: 0.7;
}
.vn-options__headline {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(2.25rem, 5.5vw, 4.5rem);
line-height: 1.04;
letter-spacing: -0.015em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-options__list {
display: flex;
flex-direction: column;
gap: clamp(4rem, 8vw, 7rem);
}
.vn-options__item {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(2.5rem, 6vw, 5rem);
align-items: center;
}
.vn-options__item.is-flipped {
grid-template-columns: 1fr 1.15fr;
}
.vn-options__item.is-flipped .vn-options__photo {
order: 2;
}
.vn-options__item.is-flipped .vn-options__body {
order: 1;
}
@media (max-width: 880px) {
.vn-options__item,
.vn-options__item.is-flipped {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.vn-options__item.is-flipped .vn-options__photo {
order: 0;
}
.vn-options__item.is-flipped .vn-options__body {
order: 0;
}
}
.vn-options__photo {
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--surface-raised);
}
.vn-options__photo a {
display: block;
width: 100%;
height: 100%;
}
.vn-options__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s var(--vn-ease-out, ease-out);
}
.vn-options__item:hover .vn-options__photo img {
transform: scale(1.03);
}
.vn-options__body {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0 0.25rem;
}
[data-section="uebernachten-optionen"] p.vn-options__eyebrow-item {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0;
}
.vn-options__title {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-options__title a {
color: inherit;
text-decoration: none;
}
.vn-options__title a:hover {
color: var(--sage-300);
}
[data-section="uebernachten-optionen"] p.vn-options__meta {
font-family: var(--font-display);
font-style: italic;
font-size: 1rem;
color: var(--sage-300);
letter-spacing: 0.01em;
margin: 0;
}
[data-section="uebernachten-optionen"] p.vn-options__text {
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.65;
color: var(--on-dark);
margin: 0;
}
.vn-options__cta {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-top: 0.5rem;
padding-bottom: 0.45rem;
border-bottom: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
font-family: var(--font-body);
font-size: 0.92rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--on-dark-strong);
text-decoration: none;
width: max-content;
transition: gap 0.3s var(--vn-ease-out, ease-out), border-color 0.3s ease;
}
.vn-options__cta:hover {
gap: 1rem;
border-bottom-color: var(--sage-300);
color: var(--sage-300);
}
.vn-options__cta-arrow {
transition: transform 0.3s var(--vn-ease-out, ease-out);
}
.vn-options__cta:hover .vn-options__cta-arrow {
transform: translateX(0.35rem);
}
.vn-kontakt {
color: var(--on-dark);
padding: clamp(5rem, 10vw, 9rem) 0;
}
.vn-kontakt__inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.vn-kontakt__header {
text-align: center;
max-width: 64rem;
margin: 0 auto clamp(3rem, 6vw, 5rem);
}
.vn-kontakt p.vn-kontakt__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.85rem;
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0 0 1.25rem;
}
.vn-kontakt__eyebrow::before,
.vn-kontakt__eyebrow::after {
content: '';
width: 2.4rem;
height: 1px;
background: var(--on-dark-muted);
opacity: 0.7;
}
.vn-kontakt__headline {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(2.25rem, 5.5vw, 4.5rem);
line-height: 1.04;
letter-spacing: -0.015em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-kontakt__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 3vw, 2rem);
}
@media (max-width: 980px) {
.vn-kontakt__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.vn-kontakt__grid {
grid-template-columns: 1fr;
}
}
.vn-kontakt__card {
display: flex;
flex-direction: column;
gap: 1rem;
padding: clamp(1.75rem, 2.5vw, 2.25rem) clamp(1.5rem, 2vw, 2rem);
background: color-mix(in srgb, var(--sage-900) 40%, transparent);
border: 1px solid var(--divider-on-dark);
transition: border-color 0.3s ease;
}
.vn-kontakt__card:hover {
border-color: var(--sage-300);
}
.vn-kontakt p.vn-kontakt__label {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0;
}
.vn-kontakt__big-link,
.vn-kontakt__big-text {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--on-dark-strong);
text-decoration: none;
margin: 0;
}
.vn-kontakt__big-link {
border-bottom: 1px solid var(--divider-on-dark);
padding-bottom: 0.35rem;
display: inline-block;
width: max-content;
max-width: 100%;
transition: color 0.3s ease, border-color 0.3s ease;
}
.vn-kontakt__big-link:hover {
color: var(--sage-300);
border-bottom-color: var(--sage-300);
}
.vn-kontakt__big-link--small {
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
line-height: 1.25;
}
.vn-kontakt p.vn-kontakt__detail {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.55;
color: var(--on-dark);
margin: 0;
}
.vn-th-overview {
padding: clamp(5rem, 9vw, 8rem) var(--gutter);
}
.vn-th-overview__inner {
max-width: var(--page-max);
margin: 0 auto;
}
.vn-th-overview__grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: clamp(2.5rem, 5vw, 6rem);
align-items: start;
}
@media (max-width: 880px) {
.vn-th-overview__grid {
grid-template-columns: 1fr;
gap: clamp(2rem, 6vw, 3rem);
}
}
.vn-th-overview__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.78rem;
color: var(--on-dark-muted);
margin: 0 0 1.25rem;
}
.vn-th-overview__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 96;
font-size: clamp(2rem, 4.2vw, 3.4rem);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
margin: 0 0 1.75rem;
}
.vn-th-overview__body {
font-family: var(--font-body);
color: var(--on-dark);
}
.vn-th-overview__body p {
font-size: 1.1rem;
line-height: 1.7;
margin: 0 0 1rem;
}
.vn-th-overview__cta {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
margin-top: 1.75rem;
font-family: var(--font-body);
font-size: 0.95rem;
letter-spacing: 0.04em;
color: var(--on-dark-strong);
text-decoration: none;
border-bottom: 1px solid var(--divider-on-dark);
padding-bottom: 0.35rem;
transition: border-color .2s ease;
}
.vn-th-overview__cta:hover { border-bottom-color: var(--on-dark-strong); }
.vn-th-overview__cta-arrow { transition: transform .2s ease; }
.vn-th-overview__cta:hover .vn-th-overview__cta-arrow { transform: translateX(4px); }
.vn-th-overview__facts {
background: var(--surface-raised);
padding: clamp(1.75rem, 3vw, 2.5rem);
border: 1px solid var(--divider-on-dark);
}
.vn-th-overview__facts-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin: 0;
}
.vn-th-overview__fact {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 1rem;
border-bottom: 1px solid var(--divider-on-dark);
padding-bottom: 1rem;
}
.vn-th-overview__fact:last-child { border-bottom: 0; padding-bottom: 0; }
.vn-th-overview__fact dt {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.72rem;
color: var(--on-dark-muted);
}
.vn-th-overview__fact dd {
font-family: var(--font-display);
font-variation-settings: "opsz" 60;
font-size: clamp(1.25rem, 2vw, 1.6rem);
color: var(--on-dark-strong);
margin: 0;
text-align: right;
}
.vn-th-ausstattung__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 720px) {
.vn-th-ausstattung__list { grid-template-columns: 1fr; }
}
.vn-th-ausstattung__item {
display: grid;
grid-template-columns: minmax(0, auto) 1fr;
gap: 0.85rem;
padding: 1rem 0;
border-bottom: 1px solid var(--divider-on-dark);
}
.vn-th-ausstattung__label {
font-family: var(--font-display);
font-variation-settings: "opsz" 48;
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
color: var(--on-dark-strong);
letter-spacing: -0.01em;
}
.vn-th-ausstattung__detail {
font-family: var(--font-body);
font-size: 0.98rem;
line-height: 1.55;
color: var(--on-dark);
}
.vn-th-highlights {
padding: clamp(5rem, 9vw, 8rem) var(--gutter);
}
.vn-th-highlights__inner {
max-width: 64rem;
margin: 0 auto;
}
.vn-th-highlights__header {
margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.vn-th-highlights__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.78rem;
color: var(--on-dark-muted);
margin: 0 0 1.25rem;
}
.vn-th-highlights__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 110;
font-size: clamp(2.2rem, 4.6vw, 3.6rem);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
margin: 0;
max-width: 28ch;
}
.vn-th-highlights__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 3vw, 2.25rem);
counter-reset: th-hl;
}
.vn-th-highlights__item {
display: grid;
grid-template-columns: 4.5rem 1fr;
gap: clamp(1rem, 2.5vw, 2.25rem);
align-items: baseline;
padding: 1.25rem 0;
border-bottom: 1px solid var(--divider-on-dark);
}
@media (max-width: 600px) {
.vn-th-highlights__item { grid-template-columns: 3rem 1fr; gap: 0.85rem; }
}
.vn-th-highlights__num {
font-family: var(--font-display);
font-variation-settings: "opsz" 144;
font-size: clamp(2rem, 3.5vw, 2.8rem);
color: var(--sage-300);
letter-spacing: -0.02em;
line-height: 1;
}
.vn-th-highlights__text {
font-family: var(--font-body);
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
line-height: 1.55;
color: var(--on-dark);
margin: 0;
}
.vn-th-highlights__storno {
margin: clamp(2.5rem, 5vw, 4rem) 0 0;
padding: 1.5rem 1.75rem;
background: color-mix(in srgb, var(--sage-700) 65%, transparent);
border-left: 2px solid var(--sage-300);
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.55;
color: var(--on-dark);
}
.vn-th-highlights__storno-label {
font-weight: 500;
color: var(--on-dark-strong);
letter-spacing: 0.04em;
margin-right: 0.4rem;
}
.vn-bridge {
padding: clamp(5rem, 9vw, 8rem) var(--gutter);
}
.vn-bridge__inner {
max-width: var(--page-max);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(3rem, 6vw, 5rem);
}
.vn-bridge__statement {
max-width: 56rem;
margin: 0 auto;
text-align: center;
}
.vn-bridge__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.78rem;
color: var(--on-dark-muted);
margin: 0 0 1.5rem;
}
.vn-bridge__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 120;
font-size: clamp(2.25rem, 4.2vw, 3.6rem);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
margin: 0 0 2rem;
text-wrap: balance;
}
.vn-bridge__body {
font-family: var(--font-body);
font-size: 1.15rem;
line-height: 1.7;
color: var(--on-dark);
margin: 0;
}
.vn-bridge__strip {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
@media (max-width: 1100px) {
.vn-bridge__strip {
grid-template-columns: 1fr 1fr 1fr;
}
.vn-bridge__card.is-featured {
grid-column: span 3;
}
}
@media (max-width: 768px) {
.vn-bridge__strip {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 0.85rem;
margin: 0 calc(var(--gutter) * -1);
padding: 0 var(--gutter) 0.5rem;
scrollbar-width: none;
}
.vn-bridge__strip::-webkit-scrollbar { display: none; }
.vn-bridge__card {
flex: 0 0 75%;
scroll-snap-align: start;
}
.vn-bridge__card.is-featured {
flex: 0 0 85%;
grid-column: auto;
}
}
.vn-bridge__card {
display: flex;
flex-direction: column;
background: var(--surface-raised);
border: 1px solid var(--divider-on-dark);
text-decoration: none;
overflow: hidden;
transition: transform .35s ease, border-color .25s ease;
min-width: 0;
}
.vn-bridge__card:hover,
.vn-bridge__card:focus-visible {
transform: translateY(-3px);
border-color: var(--sage-300);
}
.vn-bridge__card-photo {
margin: 0;
aspect-ratio: 4/5;
overflow: hidden;
background: var(--sage-900);
}
.vn-bridge__card.is-featured .vn-bridge__card-photo {
aspect-ratio: 4/4.6;
}
.vn-bridge__card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .55s ease;
}
.vn-bridge__card:hover .vn-bridge__card-photo img,
.vn-bridge__card:focus-visible .vn-bridge__card-photo img {
transform: scale(1.045);
}
.vn-bridge__card-body {
padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1rem, 1.8vw, 1.5rem) clamp(1.25rem, 2vw, 1.75rem);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.vn-bridge__card-label {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 60;
font-size: clamp(1.15rem, 1.6vw, 1.45rem);
color: var(--on-dark-strong);
letter-spacing: -0.015em;
margin: 0;
line-height: 1.15;
position: relative;
display: inline-block;
}
.vn-bridge__card-label::after {
content: '';
position: absolute;
left: 0;
bottom: -3px;
width: 0;
height: 1px;
background: var(--sage-300);
transition: width .35s ease;
}
.vn-bridge__card:hover .vn-bridge__card-label::after,
.vn-bridge__card:focus-visible .vn-bridge__card-label::after {
width: 100%;
}
.vn-bridge__card-desc {
font-family: var(--font-body);
font-size: 0.92rem;
line-height: 1.5;
color: var(--on-dark);
margin: 0;
}
.vn-bridge__stats {
margin-top: clamp(1rem, 2vw, 2rem);
}
.vn-bridge__stats .vn-stats {
padding-top: 0;
padding-bottom: 0;
}
.vn-services--bridge .vn-services__header.vn-services__header--split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2.5rem, 6vw, 6rem);
align-items: start;
text-align: left;
max-width: none;
margin: 0 0 clamp(3.5rem, 6vw, 5.5rem);
padding: 0;
}
.vn-services--bridge .vn-services__header-anchor {
position: sticky;
top: clamp(5rem, 10vh, 8rem);
}
.vn-services--bridge .vn-services__header-anchor .vn-services__eyebrow {
margin: 0 0 1.5rem;
text-align: left;
}
.vn-services--bridge .vn-services__header-anchor .vn-services__headline {
text-align: left;
margin: 0;
max-width: none;
}
.vn-services--bridge .vn-services__header-lead {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vn-services--bridge .vn-services__header-lead p {
font-family: var(--font-body);
font-size: 1.1rem;
line-height: 1.7;
color: var(--on-dark);
margin: 0;
}
.vn-services--bridge .vn-services__header-lead p:first-child {
font-size: 1.2rem;
color: var(--on-dark-strong);
}
@media (max-width: 880px) {
.vn-services--bridge .vn-services__header.vn-services__header--split {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.vn-services--bridge .vn-services__header-anchor {
position: static;
}
}
.vn-statement {
padding: clamp(5rem, 9vw, 8rem) var(--gutter) clamp(3.5rem, 6vw, 5.5rem);
}
.vn-services--bridge {
padding: clamp(3rem, 5vw, 4.5rem) var(--gutter) clamp(3rem, 5vw, 4.5rem) !important;
}
.vn-statement__inner {
max-width: var(--page-max);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(3rem, 7vw, 6.5rem);
align-items: start;
}
.vn-statement__anchor {
position: sticky;
top: clamp(5rem, 10vh, 8rem);
min-width: 0;
}
.vn-statement__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 120;
font-size: clamp(2.25rem, 4.2vw, 3.6rem);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
margin: 0;
text-wrap: balance;
overflow-wrap: anywhere;
hyphens: auto;
}
.vn-statement__lead {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vn-statement__lead p {
font-family: var(--font-body);
font-size: 1.1rem;
line-height: 1.7;
color: var(--on-dark);
margin: 0;
}
.vn-statement__lead p:first-child {
font-size: 1.2rem;
color: var(--on-dark-strong);
}
@media (max-width: 880px) {
.vn-statement__inner {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.vn-statement__anchor {
position: static;
}
}
.vn-quote {
height: 120vh;
position: relative;
overflow: hidden;
padding-inline: 0;
}
.vn-quote[data-section] > .vn-quote__inner {
position: sticky;
top: 0;
height: 100vh;
max-width: none;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
overflow: hidden;
}
.vn-quote__wheel {
position: absolute;
top: 50%;
right: 0;
width: clamp(28rem, 50vw, 46rem);
height: clamp(28rem, 50vw, 46rem);
color: var(--sage-300);
opacity: 0.32;
pointer-events: none;
z-index: 0;
transform: translate(40%, -50%) rotate(var(--wheel-rot, 0deg));
transform-origin: center center;
}
.vn-quote__text {
position: relative;
z-index: 1;
width: 100%;
max-width: 70rem;
margin: 0;
padding: 0 var(--gutter);
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 144;
font-size: clamp(2.5rem, 5.5vw, 5rem);
line-height: 1.1;
letter-spacing: -0.02em;
text-align: center;
color: var(--on-dark-strong);
quotes: none;
}
.vn-quote__text::before,
.vn-quote__text::after {
content: none;
}
.vn-quote__word {
--wp: clamp(0, calc((var(--quote-progress, 0) - var(--word-r, 0) * 0.65) * 6), 1);
display: inline-block;
opacity: var(--wp);
transform: translateY(calc((1 - var(--wp)) * 20px));
transition: none;
will-change: opacity, transform;
}
@media (max-width: 720px) {
.vn-quote { height: 100vh; }
.vn-quote__inner { align-items: center; }
.vn-quote__wheel { width: 24rem; height: 24rem; transform: translate(45%, -50%) rotate(var(--wheel-rot, 0deg)); }
.vn-quote__text { font-size: clamp(2.4rem, 9vw, 3.6rem); }
}
.vn-legal {
padding: clamp(6rem, 12vw, 10rem) var(--gutter) clamp(5rem, 9vw, 7rem);
}
.vn-legal__inner {
max-width: 70rem;
margin: 0 auto;
}
.vn-legal__header {
max-width: 56rem;
margin: 0 auto clamp(4rem, 7vw, 6rem);
text-align: left;
}
.vn-legal__breadcrumb,
p.vn-legal__breadcrumb {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-strong);
margin: 0 0 2rem;
display: flex;
gap: 0.6rem;
align-items: center;
}
.vn-legal__breadcrumb a {
color: var(--on-dark-strong);
text-decoration: none;
transition: color 200ms ease;
}
.vn-legal__breadcrumb a:hover {
color: var(--on-dark-strong);
}
.vn-legal__breadcrumb span[aria-hidden] {
color: var(--sage-300);
}
.vn-legal__title {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 144;
font-size: clamp(3.5rem, 9vw, 6.5rem);
line-height: 0.95;
letter-spacing: -0.025em;
color: var(--on-dark-strong);
margin: 0 0 1.5rem;
}
.vn-legal__lead,
p.vn-legal__lead {
font-family: var(--font-body);
font-size: clamp(1rem, 1.5vw, 1.15rem);
line-height: 1.55;
color: var(--on-dark-strong);
max-width: 42rem;
margin: 0;
}
.vn-legal__body {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.vn-legal__entry {
display: grid;
grid-template-columns: minmax(14rem, 18rem) 1fr;
gap: clamp(2rem, 5vw, 4rem);
padding: clamp(2.5rem, 4vw, 3.5rem) 0;
border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}
.vn-legal__entry:last-child {
border-bottom: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}
.vn-legal__entry-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 60;
font-size: clamp(1.5rem, 2.5vw, 2rem);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-legal__entry-text {
display: flex;
flex-direction: column;
gap: 1rem;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
color: var(--on-dark-strong);
}
.vn-legal__entry-text p {
margin: 0;
color: var(--on-dark-strong);
}
.vn-legal__entry-text strong {
color: var(--on-dark-strong);
font-weight: 500;
}
.vn-legal__entry-text a {
color: var(--on-dark-strong);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--paper) 35%, transparent);
text-underline-offset: 3px;
transition: text-decoration-color 200ms ease;
}
.vn-legal__entry-text a:hover {
text-decoration-color: var(--sage-300);
}
@media (max-width: 780px) {
.vn-legal__entry {
grid-template-columns: 1fr;
gap: 1rem;
padding: clamp(2rem, 5vh, 2.75rem) 0;
}
}
.vn-map {
background: var(--sage-800);
color: var(--on-dark);
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.vn-map__inner {
max-width: 1400px;
margin: 0 auto;
}
.vn-map__header {
max-width: 56rem;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
text-align: center;
}
.vn-map p.vn-map__eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0 0 1rem;
}
.vn-map__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 4.2vw, 3.4rem);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-map__grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: stretch;
}
@media (max-width: 980px) {
.vn-map__grid { grid-template-columns: 1fr; }
}
.vn-map__canvas-wrap {
position: relative;
overflow: hidden;
border-radius: 6px;
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
min-height: clamp(380px, 60vh, 620px);
}
.vn-map__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: var(--sage-700);
}
@media (max-width: 980px) {
.vn-map__canvas-wrap {
min-height: 380px;
}
}
.vn-map__panel {
background: var(--surface-raised);
color: var(--on-dark-strong);
padding: clamp(1.75rem, 3vw, 2.5rem);
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.vn-map p.vn-map__panel-eyebrow {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0;
}
.vn-map__address {
font-family: var(--font-body);
font-style: normal;
font-size: 1.1rem;
line-height: 1.55;
color: var(--on-dark-strong);
margin: 0;
}
.vn-map__brand {
display: block;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 48;
font-size: clamp(1.4rem, 2.2vw, 1.75rem);
line-height: 1.1;
color: var(--sage-300);
margin-bottom: 0.4rem;
}
.vn-map__gps {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.9rem 0;
margin: 0;
border-top: 1px solid var(--divider-on-dark);
border-bottom: 1px solid var(--divider-on-dark);
}
.vn-map__gps-label {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
}
.vn-map__gps-val {
font-family: var(--font-body);
font-size: 0.95rem;
font-variant-numeric: tabular-nums;
color: var(--on-dark-strong);
}
.vn-map__actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.vn-map p.vn-map__actions-label {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0 0 0.5rem;
}
.vn-map__action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.2rem;
background: transparent;
border: 1px solid var(--divider-on-dark);
border-radius: 4px;
color: var(--on-dark-strong);
font-family: var(--font-body);
font-size: 1rem;
cursor: pointer;
text-decoration: none;
transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
width: 100%;
text-align: left;
}
.vn-map__action:hover {
background: color-mix(in srgb, var(--sage-300) 8%, transparent);
border-color: var(--sage-300);
}
.vn-map__action--primary {
background: var(--sage-300);
color: var(--sage-900);
border-color: var(--sage-300);
}
.vn-map__action--primary:hover {
background: var(--paper-50);
border-color: var(--paper-50);
color: var(--sage-900);
}
.vn-map__action.is-copied {
background: color-mix(in srgb, var(--sage-300) 18%, transparent);
border-color: var(--sage-300);
}
.vn-map__action-arrow {
font-size: 1.1rem;
transition: transform 220ms ease;
}
.vn-map__action:hover .vn-map__action-arrow {
transform: translateX(6px);
}
.vn-map p.vn-map__note {
font-family: var(--font-body);
font-size: 0.9rem;
line-height: 1.55;
color: var(--on-dark);
margin: 0;
padding-top: 0.5rem;
border-top: 1px solid var(--divider-on-dark);
}
.vn-map__note strong {
color: var(--sage-300);
font-weight: 500;
}
.vn-map p.vn-map__attribution {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.04em;
color: var(--on-dark-muted);
margin: 1rem 0 0;
text-align: right;
}
.vn-map__attribution a {
color: var(--on-dark);
text-decoration: underline;
text-decoration-color: var(--divider-on-dark);
text-underline-offset: 2px;
}
.vn-map__attribution a:hover {
color: var(--sage-300);
}
.vn-map__fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
color: var(--on-dark);
text-align: center;
}
.leaflet-container {
font-family: var(--font-body) !important;
background: var(--sage-700) !important;
}
.leaflet-popup-content-wrapper {
background: var(--surface-raised);
color: var(--on-dark-strong);
border-radius: 4px;
box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}
.leaflet-popup-content {
font-family: var(--font-body);
font-size: 0.92rem;
line-height: 1.5;
margin: 0.8rem 1rem;
color: var(--on-dark-strong);
}
.leaflet-popup-content strong {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 1.05rem;
color: var(--sage-300);
}
.leaflet-popup-tip {
background: var(--surface-raised);
}
.leaflet-popup-close-button {
color: var(--on-dark) !important;
}
.leaflet-control-zoom a {
background: var(--surface-raised) !important;
color: var(--on-dark-strong) !important;
border-color: var(--divider-on-dark) !important;
}
.leaflet-control-zoom a:hover {
background: var(--sage-300) !important;
color: var(--sage-900) !important;
}
.vn-map-pin {
background: transparent !important;
border: none !important;
}
.vn-anreise {
background: var(--sage-800);
color: var(--on-dark);
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
border-top: 1px solid var(--divider-on-dark);
}
.vn-anreise__inner {
max-width: 1400px;
margin: 0 auto;
}
.vn-anreise__header {
max-width: 56rem;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
text-align: center;
}
.vn-anreise p.vn-anreise__eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0 0 1rem;
}
.vn-anreise__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(2rem, 4.2vw, 3.4rem);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-anreise__grid {
display: grid;
grid-template-columns: 1.35fr 1fr 0.85fr;
gap: clamp(2rem, 4vw, 4rem);
align-items: start;
}
@media (max-width: 960px) {
.vn-anreise__grid {
grid-template-columns: 1fr;
gap: clamp(2.5rem, 5vw, 3.5rem);
}
}
.vn-anreise__mode {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 1.5rem;
border-top: 1px solid var(--divider-on-dark);
}
.vn-anreise p.vn-anreise__mode-eyebrow {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sage-300);
margin: 0;
}
.vn-anreise__mode-headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 60;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-anreise p.vn-anreise__mode-body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--on-dark-strong);
margin: 0;
}
.vn-anreise p.vn-anreise__mode-detail {
font-family: var(--font-body);
font-size: 0.9rem;
font-style: italic;
line-height: 1.5;
color: var(--on-dark);
margin: 0;
padding-top: 0.5rem;
border-top: 1px dashed var(--divider-on-dark);
}
.vn-anreise__distances {
margin: 0.5rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.vn-anreise__dist-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--divider-on-dark);
}
.vn-anreise__dist-row:last-child { border-bottom: none; }
.vn-anreise__dist-label {
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--on-dark-muted);
}
.vn-anreise__dist-value {
font-family: var(--font-body);
font-size: 0.95rem;
font-variant-numeric: tabular-nums;
color: var(--on-dark-strong);
margin: 0;
}
.vn-praktisch {
background: var(--sage-800);
color: var(--on-dark);
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
border-top: 1px solid var(--divider-on-dark);
}
.vn-praktisch__inner {
max-width: 1400px;
margin: 0 auto;
}
.vn-praktisch__header {
max-width: 56rem;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
text-align: center;
}
.vn-praktisch p.vn-praktisch__eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0 0 1rem;
}
.vn-praktisch__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 72;
font-size: clamp(1.8rem, 3.6vw, 2.8rem);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-praktisch__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 1100px) {
.vn-praktisch__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.vn-praktisch__list { grid-template-columns: 1fr; }
}
.vn-praktisch__item {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
padding-top: 1.25rem;
border-top: 1px solid var(--divider-on-dark);
}
.vn-praktisch__index {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 36;
font-size: 1rem;
color: var(--sage-300);
letter-spacing: 0.04em;
}
.vn-praktisch__body {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.vn-praktisch p.vn-praktisch__label {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0;
}
.vn-praktisch p.vn-praktisch__value {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 48;
font-size: clamp(1.4rem, 2vw, 1.75rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-praktisch p.vn-praktisch__detail {
font-family: var(--font-body);
font-size: 0.92rem;
line-height: 1.55;
color: var(--on-dark);
margin: 0.3rem 0 0;
}
.vn-map,
.vn-anreise,
.vn-direkt,
.vn-praktisch {
background-color: transparent;
background-image: none;
}
.vn-map { padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(2rem, 4vw, 3rem); }
.vn-anreise { padding: clamp(4rem, 7vw, 6rem) var(--gutter); border-top: 1px solid var(--divider-on-dark); }
.vn-direkt { padding: clamp(4rem, 7vw, 6rem) var(--gutter); border-top: 1px solid var(--divider-on-dark); }
.vn-praktisch { padding: clamp(4rem, 7vw, 6rem) var(--gutter) clamp(5rem, 8vw, 7rem); border-top: 1px solid var(--divider-on-dark); }
.vn-map__grid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: clamp(1.5rem, 2.5vw, 2rem);
align-items: stretch;
}
@media (max-width: 980px) {
.vn-map__grid { grid-template-columns: 1fr; }
}
.vn-map__canvas-wrap {
position: relative;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.55);
min-height: clamp(420px, 64vh, 660px);
}
.vn-map__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: var(--sage-700);
}
.vn-map p.vn-map__hint {
position: absolute;
bottom: 0.85rem;
left: 50%;
transform: translateX(-50%);
margin: 0;
padding: 0.45rem 0.95rem;
background: color-mix(in srgb, var(--sage-900) 78%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--on-dark);
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.08em;
border-radius: 999px;
pointer-events: none;
opacity: 1;
transition: opacity 280ms ease;
z-index: 410;
}
.vn-map__canvas.is-active ~ .vn-map__hint,
.vn-map__canvas-wrap:has(.is-active) .vn-map__hint {
opacity: 0;
}
@media (max-width: 980px) {
.vn-map__canvas-wrap { min-height: 420px; }
}
.vn-map__panel {
background: var(--surface-raised);
color: var(--on-dark-strong);
padding: clamp(1.75rem, 2.6vw, 2.4rem);
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vn-map p.vn-map__panel-eyebrow {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0;
}
.vn-map__panel-headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 60;
font-size: clamp(1.65rem, 2.4vw, 2.15rem);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--on-dark-strong);
margin: 0 0 0.25rem;
}
.vn-map__address {
font-family: var(--font-body);
font-style: normal;
font-size: 1.05rem;
line-height: 1.5;
color: var(--on-dark-strong);
margin: 0;
padding-top: 0.5rem;
border-top: 1px solid var(--divider-on-dark);
}
.vn-map p.vn-map__gps {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin: 0 0 0.5rem;
}
.vn-map__gps-tag {
font-family: var(--font-body);
font-size: 0.62rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--sage-300);
border: 1px solid var(--sage-300);
padding: 0.15rem 0.45rem;
border-radius: 2px;
}
.vn-map__gps-val {
font-family: var(--font-body);
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
color: var(--on-dark);
}
.vn-map__actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.25rem;
}
.vn-map__action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.95rem 1.1rem;
background: transparent;
border: 1px solid var(--divider-on-dark);
border-radius: 3px;
color: var(--on-dark-strong);
font-family: var(--font-body);
font-size: 0.95rem;
cursor: pointer;
text-decoration: none;
transition: background 220ms ease, border-color 220ms ease, color 200ms ease;
width: 100%;
text-align: left;
}
.vn-map__action:hover {
background: color-mix(in srgb, var(--sage-300) 10%, transparent);
border-color: var(--sage-300);
color: var(--on-dark-strong);
}
.vn-map__action--primary {
background: var(--sage-300);
color: var(--sage-900);
border-color: var(--sage-300);
}
.vn-map__action--primary:hover {
background: var(--paper-50);
border-color: var(--paper-50);
color: var(--sage-900);
}
.vn-map__action.is-copied {
background: color-mix(in srgb, var(--sage-300) 22%, transparent);
border-color: var(--sage-300);
color: var(--sage-300);
}
.vn-map__action-arrow {
font-size: 1.05rem;
transition: transform 220ms ease;
}
.vn-map__action:hover .vn-map__action-arrow {
transform: translateX(5px);
}
.vn-map p.vn-map__note {
font-family: var(--font-body);
font-size: 0.88rem;
line-height: 1.55;
color: var(--on-dark);
margin: 0.25rem 0 0;
padding-top: 0.85rem;
border-top: 1px solid var(--divider-on-dark);
}
.vn-map__note .vn-italic { color: var(--sage-300); }
.vn-map p.vn-map__attribution {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--on-dark-muted);
margin: 1.5rem 0 0;
text-align: right;
}
.vn-map-pin,
.vn-map-pin--gasthof,
.vn-map-pin--muehle {
background: transparent !important;
border: none !important;
}
.vn-map-pin svg {
transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.leaflet-marker-icon:hover .vn-map-pin svg,
.leaflet-marker-icon.leaflet-zoom-anim .vn-map-pin svg {
transform: translateY(-3px) scale(1.06);
}
.vn-anreise__inner { max-width: 1400px; margin: 0 auto; }
.vn-anreise__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
max-width: 60rem;
text-align: center;
}
.vn-anreise p.vn-anreise__eyebrow {
font-family: var(--font-body);
font-size: 0.74rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0;
}
.vn-anreise__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 84;
font-size: clamp(2.2rem, 5vw, 3.8rem);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-anreise__grid {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
@media (max-width: 880px) {
.vn-anreise__grid {
grid-template-columns: 1fr;
gap: clamp(2.5rem, 5vw, 3.5rem);
}
}
.vn-anreise__mode {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 1.5rem;
border-top: 1px solid var(--divider-on-dark);
}
.vn-anreise p.vn-anreise__mode-eyebrow {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--sage-300);
margin: 0;
}
.vn-anreise__mode-headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 60;
font-size: clamp(1.65rem, 2.8vw, 2.3rem);
line-height: 1.12;
letter-spacing: -0.015em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-anreise__mode-body {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.vn-anreise p.vn-anreise__mode-body,
.vn-anreise__mode-body p {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
color: var(--on-dark-strong);
margin: 0;
}
.vn-anreise__distances {
padding-top: clamp(2rem, 3.5vw, 3rem);
border-top: 1px solid var(--divider-on-dark);
}
.vn-anreise p.vn-anreise__distances-eyebrow {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0 0 1.5rem;
}
.vn-anreise__dist-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
margin: 0;
}
@media (max-width: 760px) {
.vn-anreise__dist-grid { grid-template-columns: repeat(2, 1fr); }
}
.vn-anreise__dist-cell {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding-top: 0.85rem;
border-top: 1px solid var(--divider-on-dark);
}
.vn-anreise__dist-origin {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0;
}
.vn-anreise dd.vn-anreise__dist-value {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 48;
font-size: clamp(1.4rem, 2.4vw, 2rem);
line-height: 1.1;
color: var(--on-dark-strong);
margin: 0;
font-variant-numeric: tabular-nums;
}
.vn-anreise dd.vn-anreise__dist-time {
font-family: var(--font-body);
font-size: 0.88rem;
font-variant-numeric: tabular-nums;
color: var(--on-dark);
margin: 0;
}
.vn-direkt__inner {
max-width: 1080px;
margin: 0 auto;
}
.vn-direkt__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(2.5rem, 5vw, 5rem);
align-items: stretch;
}
@media (max-width: 880px) {
.vn-direkt__grid {
grid-template-columns: 1fr;
gap: clamp(2.5rem, 6vw, 3.5rem);
}
}
.vn-direkt__col {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
.vn-direkt__col--tel {
justify-content: center;
}
.vn-direkt__col--hours {
padding-left: clamp(2rem, 4vw, 4rem);
border-left: 1px solid var(--divider-on-dark);
}
@media (max-width: 880px) {
.vn-direkt__col--hours {
padding-left: 0;
padding-top: clamp(2rem, 6vw, 2.5rem);
border-left: none;
border-top: 1px solid var(--divider-on-dark);
}
}
.vn-direkt p.vn-direkt__eyebrow {
font-family: var(--font-body);
font-size: 0.74rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0 0 1.4rem;
}
.vn-direkt__col--hours p.vn-direkt__eyebrow {
margin-bottom: 0.85rem;
}
.vn-direkt__big-tel {
display: inline-block;
align-self: flex-start;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 80;
font-size: clamp(2.4rem, 4.6vw, 3.5rem);
line-height: 1;
letter-spacing: -0.015em;
white-space: nowrap;
color: var(--on-dark-strong);
text-decoration: none;
margin: 0;
transition: color 220ms ease;
}
.vn-direkt__big-tel:hover {
color: var(--sage-300);
}
.vn-direkt p.vn-direkt__body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
color: var(--on-dark);
margin: 1.3rem 0 0;
max-width: 30rem;
}
.vn-direkt p.vn-direkt__mobile {
font-family: var(--font-body);
font-size: 0.92rem;
line-height: 1.6;
color: var(--on-dark);
margin: 0.9rem 0 0;
}
.vn-direkt__mobile-link {
color: var(--sage-300);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 200ms ease;
}
.vn-direkt__mobile-link:hover {
color: var(--on-dark-strong);
}
.vn-direkt__hours-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.vn-direkt__hours-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.72rem 0;
border-bottom: 1px solid var(--divider-on-dark);
}
.vn-direkt__hours-row:last-child { border-bottom: none; }
.vn-direkt__hours-day {
width: auto;
padding: 0;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 28;
font-size: 1.15rem;
line-height: 1.2;
color: var(--on-dark);
}
.vn-direkt__hours-time {
padding: 0;
font-family: var(--font-body);
font-size: 0.95rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
text-align: right;
color: var(--on-dark-strong);
}
.vn-direkt__hours-row.is-closed .vn-direkt__hours-day,
.vn-direkt__hours-row.is-closed .vn-direkt__hours-time {
color: color-mix(in srgb, var(--on-dark) 42%, transparent);
font-family: var(--font-body);
font-style: normal;
font-size: 0.95rem;
}
.vn-direkt__hours-row.is-today .vn-direkt__hours-day,
.vn-direkt__hours-row.is-today .vn-direkt__hours-time {
color: var(--sage-300);
}
.vn-direkt__hours-today-tag {
display: inline-block;
font-family: var(--font-body);
font-style: normal;
font-size: 0.58rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sage-300);
vertical-align: middle;
margin-left: 0.55rem;
padding: 0.14rem 0.42rem;
border: 1px solid color-mix(in srgb, var(--sage-300) 45%, transparent);
border-radius: 2px;
}
.vn-direkt p.vn-direkt__hours-note {
font-family: var(--font-body);
font-size: 0.85rem;
line-height: 1.6;
font-style: italic;
color: var(--on-dark-muted);
margin: 1.35rem 0 0;
}
.vn-praktisch__inner { max-width: 1400px; margin: 0 auto; }
.vn-praktisch__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
max-width: 60rem;
text-align: center;
}
.vn-praktisch p.vn-praktisch__eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 600;
color: var(--on-dark-muted);
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.vn-praktisch p.vn-praktisch__eyebrow::before,
.vn-praktisch p.vn-praktisch__eyebrow::after {
content: "";
display: inline-block;
width: 2.5rem;
height: 1px;
background: var(--on-dark-muted);
}
.vn-praktisch__headline {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: "opsz" 84;
font-size: clamp(2.2rem, 5vw, 3.8rem);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-praktisch__list {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.vn-praktisch__row {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
gap: clamp(1rem, 3vw, 2.5rem);
align-items: baseline;
padding: clamp(1.5rem, 2.5vw, 2.25rem) 0;
border-top: 1px solid var(--divider-on-dark);
}
.vn-praktisch__row:last-child {
border-bottom: 1px solid var(--divider-on-dark);
}
@media (max-width: 880px) {
.vn-praktisch__row {
grid-template-columns: 1fr;
gap: 0.6rem;
padding: clamp(1.5rem, 4vw, 2rem) 0;
}
}
.vn-praktisch dt.vn-praktisch__label {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--on-dark-muted);
margin: 0;
padding-top: 0.5rem;
}
.vn-praktisch dd.vn-praktisch__value {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 60;
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--on-dark-strong);
margin: 0;
}
.vn-praktisch dd.vn-praktisch__detail {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
color: var(--on-dark-strong);
margin: 0;
max-width: 42rem;
}
@media (prefers-reduced-motion: no-preference) {
.vn-map-pin svg { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); }
}
.vn-anreise__mode {
position: relative;
}
.vn-anreise__icon-wrap {
color: var(--sage-300);
width: clamp(70px, 8vw, 96px);
height: auto;
margin-bottom: 1.25rem;
display: block;
}
.vn-anreise__mode-icon {
width: 100%;
height: auto;
display: block;
color: inherit;
}
.vn-anreise__mode {
padding-top: 1.75rem;
}
.vn-praktisch__row {
grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 3fr);
gap: clamp(1.25rem, 3vw, 2.5rem);
align-items: start;
}
.vn-praktisch__icon-wrap {
width: clamp(48px, 5vw, 62px);
height: clamp(48px, 5vw, 62px);
color: var(--sage-300);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--divider-on-dark);
border-radius: 50%;
padding: 0.6rem;
flex-shrink: 0;
transition: border-color 240ms ease, color 240ms ease;
}
.vn-praktisch__row:hover .vn-praktisch__icon-wrap {
border-color: var(--sage-300);
color: var(--paper-50);
}
.vn-praktisch__icon {
width: 100%;
height: 100%;
display: block;
color: inherit;
}
.vn-praktisch__head {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding-top: 0.2rem;
}
.vn-praktisch dt.vn-praktisch__label {
padding-top: 0;
}
@media (max-width: 880px) {
.vn-praktisch__row {
grid-template-columns: auto 1fr;
grid-template-areas:
"icon head"
"detail detail";
gap: 1rem 1.25rem;
}
.vn-praktisch__icon-wrap { grid-area: icon; }
.vn-praktisch__head { grid-area: head; }
.vn-praktisch__detail { grid-area: detail; margin-top: 0.5rem; }
}
@media (max-width: 480px) {
.vn-praktisch__icon-wrap {
width: 44px;
height: 44px;
padding: 0.55rem;
}
}
.vn-praktisch__icon-wrap {
width: clamp(56px, 5.5vw, 72px);
height: clamp(56px, 5.5vw, 72px);
padding: 0.85rem;
border: 1.5px solid var(--divider-on-dark);
}
.vn-anreise__icon-wrap {
width: clamp(78px, 9vw, 108px);
margin-bottom: 1.5rem;
}
@media (max-width: 480px) {
.vn-praktisch__icon-wrap {
width: 52px;
height: 52px;
padding: 0.75rem;
}
}
.vn-map .leaflet-popup-content-wrapper {
background: var(--sage-700) !important;
color: var(--paper-50) !important;
border: 1px solid var(--sage-300) !important;
border-radius: 4px !important;
box-shadow: 0 14px 36px -10px rgba(0,0,0,0.55) !important;
padding: 0 !important;
}
.vn-map .leaflet-popup-content {
color: var(--paper-50) !important;
font-family: var(--font-body) !important;
font-size: 0.92rem !important;
line-height: 1.55 !important;
margin: 0.85rem 1.05rem !important;
}
.vn-map .leaflet-popup-content strong {
display: block;
font-family: var(--font-display) !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: 1.1rem !important;
color: var(--sage-300) !important;
margin-bottom: 0.3rem;
}
.vn-map .leaflet-popup-content br + * {
color: var(--paper-50) !important;
}
.vn-map .leaflet-popup-tip {
background: var(--sage-700) !important;
border: 1px solid var(--sage-300) !important;
}
.vn-map .leaflet-popup-close-button {
color: var(--paper-50) !important;
font-size: 18px !important;
padding: 4px 6px 0 0 !important;
}
.vn-map .leaflet-popup-close-button:hover {
color: var(--sage-300) !important;
}
.vn-map__canvas:focus,
.vn-map__canvas:focus-visible,
.vn-map__canvas .leaflet-container:focus {
outline: none !important;
}
.vn-map__canvas .leaflet-interactive:focus {
outline: none !important;
}
.vn-praktisch__row {
grid-template-columns: auto minmax(0, 2fr) minmax(0, 2.6fr);
column-gap: clamp(1.5rem, 2.5vw, 2.25rem);
row-gap: 0;
align-items: center;
}
.vn-praktisch__head {
gap: 0.35rem;
padding-top: 0;
}
.vn-praktisch__detail {
padding-left: clamp(0.5rem, 1.5vw, 1.25rem);
border-left: 1px solid var(--divider-on-dark);
}
@media (max-width: 880px) {
.vn-praktisch__row {
grid-template-columns: auto 1fr;
grid-template-areas:
"icon head"
"detail detail";
column-gap: 1.25rem;
row-gap: 1rem;
align-items: center;
}
.vn-praktisch__detail {
padding-left: 0;
border-left: none;
margin-top: 0;
}
}
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.28s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none !important;
}
}
.vn-hero-logo__description:empty {
display: none;
}
.vn-map__consent {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1rem, 2.2vw, 1.5rem);
padding: clamp(1.5rem, 5vw, 3.5rem);
text-align: center;
background-color: var(--sage-800);
background-image: var(--vn-grain);
background-size: 360px 360px;
}
.vn-map__consent-text {
font-family: var(--font-body);
font-size: clamp(0.9rem, 1.3vw, 1rem);
line-height: 1.6;
color: var(--on-dark);
max-width: 36rem;
margin: 0;
}
.vn-map__consent-btn {
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--sage-900);
background: var(--paper-50);
border: none;
border-radius: 2px;
padding: 0.85rem 1.9rem;
cursor: pointer;
transition: background 200ms ease, transform 200ms ease;
}
.vn-map__consent-btn:hover {
background: var(--paper);
transform: translateY(-1px);
}
.vn-map__consent-alt {
font-family: var(--font-body);
font-size: 0.8rem;
color: var(--on-dark);
text-decoration: underline;
text-underline-offset: 3px;
opacity: 0.85;
transition: opacity 200ms ease;
}
.vn-map__consent-alt:hover { opacity: 1; }
:root {
--cmplz_banner_width: 430px !important;
--cmplz_banner_background_color: var(--sage-900) !important;
--cmplz_banner_border_color: color-mix(in srgb, var(--paper) 16%, transparent) !important;
--cmplz_banner_border_width: 1px 1px 1px 1px !important;
--cmplz_banner_border_radius: 3px 3px 3px 3px !important;
--cmplz_text_color: var(--on-dark) !important;
--cmplz_hyperlink_color: var(--on-dark-muted) !important;
--cmplz_text_font_size: 13.5px !important;
--cmplz_title_font_size: 17px !important;
--cmplz_link_font_size: 12.5px !important;
--cmplz_category_body_font_size: 12.5px !important;
--cmplz_button_font_size: 12.5px !important;
--cmplz_button_border_radius: 2px 2px 2px 2px !important;
--cmplz_button_accept_background_color: var(--paper-50) !important;
--cmplz_button_accept_border_color: var(--paper-50) !important;
--cmplz_button_accept_text_color: var(--sage-900) !important;
--cmplz_button_deny_background_color: transparent !important;
--cmplz_button_deny_border_color: color-mix(in srgb, var(--paper) 45%, transparent) !important;
--cmplz_button_deny_text_color: var(--on-dark-strong) !important;
--cmplz_button_settings_background_color: transparent !important;
--cmplz_button_settings_border_color: color-mix(in srgb, var(--paper) 22%, transparent) !important;
--cmplz_button_settings_text_color: var(--on-dark-muted) !important;
--cmplz_category_header_always_active_color: var(--on-dark-muted) !important;
--cmplz_category_header_title_font_size: 13.5px !important;
--cmplz_slider_active_color: var(--sage-300) !important;
--cmplz_slider_inactive_color: var(--sage-600) !important;
--cmplz_slider_bullet_color: var(--paper-50) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: 0.005em;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
background-color: var(--paper);
border-color: var(--paper);
transform: translateY(-1px);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
border-color: var(--paper);
background-color: color-mix(in srgb, var(--paper) 10%, transparent);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-options:hover {
border-color: color-mix(in srgb, var(--paper) 45%, transparent);
color: var(--on-dark-strong);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link:hover {
color: var(--on-dark-strong);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
background-color: color-mix(in srgb, var(--paper) 7%, transparent) !important;
border-radius: 2px;
}
#cmplz-manage-consent .cmplz-manage-consent {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 12px;
}
.vn-intro__body a {
color: var(--sage-300);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.vn-intro__body a:hover {
color: var(--on-dark-strong);
}