/* ------------------------------------
   FONT
------------------------------------ */

@font-face {
    font-family: 'BodoniAntiqua';
    src: url('../fonts/bodoni-antiqua.woff2') format('woff2'),
         url('../fonts/bodoni-antiqua.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------
   BODY
------------------------------------ */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body, html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'HelveticaLTStd', system-ui, -apple-system, Arial, Helvetica, sans-serif;
}

/* ------------------------------------
   SELEKTOREN
------------------------------------ */

.roko {
	min-height: 80vh;
	padding: 120px 20px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;

	background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.6), rgba(0,0,0,1)), url("https://www.august-foerster.com.cn/gfx/roko.jpg");
	background-size: cover;        /* skaliert das Bild */
	background-position: center;   /* zentriert das Bild */
	background-repeat: no-repeat;  /* verhindert Kacheln */
}

.roko h2, h3 {
	color: var(--col-text);
}

/* ------------------------------------
   NAVBAR
------------------------------------ */

.navbar {
	display: flex;
	align-items: center;
	background: rgba(0,0,0,.85);
	backdrop-filter: blur(4px);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	flex-wrap: wrap;
}

/* ------------------------------------
   HERO
------------------------------------ */

.hero {
    position:relative;
    height:100dvh;
    width:100%;
    overflow:hidden;
}
/* Background */

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Slides */

.slide {
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 2s ease;
}

.slide.active {
    opacity:1;
}

/* Images */

.slide img {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Gradient Overlay */

.hero-overlay {
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.25) 40%,
        rgba(0,0,0,0.25) 60%,
        rgba(0,0,0,0.85) 100%
    );
}

/* Content */

.hero-content {
    position:relative;
    z-index:3;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
}

/* Logo */

.hero-logo {
    font-family: 'BodoniAntiqua', serif;
    font-size: 4rem;
    letter-spacing: .8px;
    margin-bottom: 30px;
    font-weight: 700;
    text-transform: uppercase;
    color: Orange;
}

/* Text */

.hero-text {
    max-width: 700px;
    margin: 0 auto 40px auto;
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.9);
}

/* CTA */

.cta-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.cta {
	display: flex;
	padding: 16px 32px;
	font-size: 1rem;
	border: 2px solid white;
	background: transparent;
	color: white;
	cursor: pointer;
	text-transform: uppercase;
	transition: all 0.3s ease;
	backdrop-filter: blur(4px);
	white-space: nowrap;
}

.cta:hover {
	background: white;
	color: black;
}

/* ------------------------------------
   RESPONSIVE
------------------------------------ */

@media (max-width: 768px) {
	.hero-logo {
		font-size: 2.5rem;
	}

	.cta-container {
		flex-direction: column;
	}

	.cta {
		padding: 8px 16px;		
	}

	.hero-text {
		font-size: 1rem;
		padding: 0 20px;
	}
}