@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
:root {
--accent: #EEE4E2;
--dark: #5C4C5E;
--light-grey: #f9f9f9;
--text: #5C4C5E;
--brand-main: #ffffff;
/* Fluid Typography Scale */
--fs-hero: clamp(2rem, 8vw, 2.5rem);
--fs-h2: clamp(1.2rem, 5vw, 2.5rem);
--fs-h3: clamp(1.1rem, 3vw, 2rem);
--fs-body: clamp(0.95rem, 1.5vw, 1.1rem);
--carousel-h: clamp(2rem, 6vw, 3.5rem);
}
* {box-sizing: border-box;margin: 0;padding: 0;}
body {font-family: 'Roboto', sans-serif;color: var(--text);line-height: 1.6;overflow-x: hidden;user-select: none;}
/* --- Typography --- */
h2 {font-size: var(--fs-h2);font-weight: 200;letter-spacing: 0.1em;text-transform: uppercase;}
h3, .expert-label {font-size: var(--fs-h3);letter-spacing: 2px;font-weight: 300;margin: .5em 0;}
p {font-size: var(--fs-body);font-weight: 300;text-align:justify;}
a{color: var(--bs-heading-color); text-decoration:none;}
a:hover{color:white; font-weight:300;}
/* --- Layout Sections --- */
section {width: 100%;padding: clamp(40px, 8vw, 80px) 5%;display: flex;align-items: center;flex-direction: column;}
/* --- Navigation --- */
nav {position: absolute;top: 0;left: 0;width: 100%;display: flex;flex-direction: column;align-items: center;padding: 100px 5% 0;z-index: 10;}
.logo {font-weight: 200;font-size: clamp(2.5rem, 6vw, 4rem);color: var(--brand-main);letter-spacing: 3px;}
.title{margin:17% 0 5%}
/* --- Hero Section --- */
.hero {height: 100vh;padding: 0 5%;background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('sunset.jpg') no-repeat center center/cover;color: white;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;}
.hero h1 {font-weight: 400;font-size: var(--fs-hero);line-height: 1.1;text-transform: uppercase;letter-spacing: clamp(5px, 2vw, 15px);}
.hero .tagline {margin-bottom: 10px;font-weight: 100;font-size: clamp(0.7rem, 2vw, 1rem);letter-spacing: 5px;text-transform: uppercase;opacity: 0.9;}
/* --- Carousel --- */
.carousel-container {height: var(--carousel-h);overflow: hidden;margin-top: 15px;}
.carousel-track {display: flex;flex-direction: column;animation: textCarousel 9s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;}
.carousel-track span {display: block;height: var(--carousel-h);font-weight: 200;font-size: clamp(1rem, 5vw, 2.5rem);letter-spacing: 4px;line-height: 1.2;}
@keyframes textCarousel {
0%, 20% { transform: translateY(0); }
33.3%, 53.3% { transform: translateY(calc(var(--carousel-h) * -1)); }
66.6%, 86.6% { transform: translateY(calc(var(--carousel-h) * -2)); }
100% { transform: translateY(calc(var(--carousel-h) * -3)); }
}

/* --- Image Frames --- */
.split-image {padding: clamp(20px, 5vw, 40px);display: flex;justify-content: center;align-items: center;}
.image-frame img {display: block;width: 100%;max-width: 250px;height: auto;object-fit: cover;position: relative;padding: 15px;background: #fff;border: 1px solid var(--dark);transition: transform 0.4s ease;transform: translateY(10px);top: -1em;}
/* --- Split Content --- */
.split-text {padding: 40px 10%;display: flex;flex-direction: column;justify-content: center;}
.contact-section{text-align:center; background: var(--dark);color: #fff;}
.contact-section h2,.contact-section h3{padding:1em 0;}
/* --- UI Elements --- */
.btn {align-self: center;padding: 12px 35px;border: 1px solid white;color:white;text-decoration: none;text-transform: uppercase;letter-spacing: 2px;font-size: 0.75rem;transition: all 0.3s ease;background: var(--dark);}
.btn:hover {background: white;color: var(--dark);}
.imprint-content{background:var(--dark); color:white; padding-top:5em; text-align:left;}

/* --- Footer --- */
footer {background: var(--dark);color: #ccc;padding: 60px 5%;text-align: right;}
footer strong { color: white;}
footer a {color: #fff;text-decoration: none;transition: opacity 0.2s;}
footer a:hover { opacity: 0.7; }
/* --- Desktop Layout --- */
@media (min-width: 992px) {
nav {padding:100px 5%;align-items: center;}
.split-section {display: grid;grid-template-columns: 1fr 2fr;background: var(--accent);align-items: stretch; height:100vh;}
.split-text {text-align: left;padding: 60px;}
.btn { align-self: flex-start; }
}
@media(min-width:320px){nav{padding:120px 5% 0;}.title{margin: 25% 0 2%;}.carousel-track span{letter-spacing: 2px;}}