/* style.css */

/* ------------------- */
/* Schriftart-Definition */
/* ------------------- */
@font-face {
    font-family: 'Congenial Regular';
    src: url('Fonts/congenial-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* ------------------- */
/* CSS-Variablen & Reset */
/* ------------------- */
:root {
    --color-primary: #FFC300; /* Reineres Honiggelb */
    --color-secondary: #000000; /* Schwarz */
    --color-background: #fff8e1; /* Originaler Gelton für den Hintergrund */
    --color-text: #000000; /* Schwarz */
    --font-heading: 'Congenial Regular', sans-serif;
    --font-body: 'Congenial Regular', sans-serif;
    --container-width: 1200px;
    --spacing: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; }
body { font-family: var(--font-body); line-height: 1.6; color: var(--color-text); background-color: var(--color-background); cursor: none !important;    
	/* Safari Font Smoothing */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
body.no-scroll { overflow: hidden; }
img, picture, video { display: block; max-width: 100%; height: auto; }
.container { 
    width: calc(100% - 2rem); /* Abstand links/rechts schmal */
    margin: 0 auto; 
}

/* Klickbare Elemente sollen keinen Standard-Cursor anzeigen */
a, button { cursor: none !important;}

/* ------------------- */
/* Header & Navigation */
/* ------------------- */
.site-header { 
    padding: 1.2rem 0; 
    background-color: var(--color-background); 
	box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Dezenter Schatten */
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}
.site-header .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.logo-image img {
    height: 61px;
    width: auto;
}

/* --- VERBESSERTES RESPONSIVE MENÜ --- */
.nav-links { 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: 0;
    right: -300px; /* Startet außerhalb des Bildschirms */
    width: 300px;
    max-width: 80%;
    height: 100%;
    
    /* Hintergrundfarbe für das mobile Menü */
    background-color: var(--color-background);
    padding: 4rem 2rem;
    z-index: 1001;
    transition: right 0.3s ease-in-out;
}
.nav-links.nav-active { 
    right: 0; /* Schiebt das Menü in den sichtbaren Bereich */
}
.nav-links li { list-style: none; margin: 1rem 0; width: 100%; }
.nav-links a { 
    text-decoration: none; 
    /* Textfarbe für das mobile Menü */
    color: var(--color-secondary);
    font-weight: 500; 
    font-size: 1.2rem; 
    padding: 0.5rem 0; 
    display: block; 
}

.nav-toggle { display: block; background: none; border: none; padding: 0.5rem; z-index: 1002; position: relative; }
.hamburger { display: block; width: 25px; height: 3px; background-color: var(--color-secondary); position: relative; transition: background-color: 0.3s ease; }
.hamburger::before,.hamburger::after { content: ''; position: absolute; width: 25px; height: 3px; background-color: var(--color-secondary); left: 0; transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease; }
.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

/* Animation des Burger-Icons zu "X" */
.nav-toggle.is-active .hamburger { background-color: transparent; }
.nav-toggle.is-active .hamburger::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-active .hamburger::after { bottom: 0; transform: rotate(-45deg); }

/* Overlay für den Hintergrund */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Wieder leicht sichtbar gemacht für den Effekt */
    opacity: 0;
    visibility: hidden;
    z-index: 999; /* KORREKTUR: z-index reduziert, damit es hinter dem Header liegt */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu-overlay.is-active {
    opacity: 1;
    visibility: visible;
}
/* --- ENDE RESPONSIVE MENÜ --- */

/* Hero-Sektion */
.hero { 
    position: relative; 
    height: 35vh; /* Höhe für mobile Ansicht reduziert */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: white; 
    overflow: hidden;
    margin: 2rem 1rem 1rem; /* Seitlicher Abstand auf 1rem erhöht */
    border-radius: 8px; /* Abgerundete Ecken */
}
.hero-media { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1; 
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover; /* Stellt sicher, dass das Video den Container füllt */
	border-radius: 8px; /* Abgerundete Ecken */
}
.hero-content { position: relative; z-index: 1; color: #fff8e1; }
h1 { font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 200; font-family: var(--font-heading); margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }

/* Kachel-Design wie im Original */
.teasers { 
    padding: 0; /* Padding wird entfernt, da der Margin jetzt den Abstand steuert */
    margin: 3rem 1rem 1rem; /* Abstand oben auf 3rem erhöht */
}
/* Hebt die Standard-Container-Regeln speziell für den Teaser-Bereich auf */
.teasers .container {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}
.kachel-container { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--spacing); }
.kachel { text-decoration: none; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.05); position: relative; }
.kachel img { width: 100%; height: 250px; object-fit: cover; display: block; transition: transform 0.7s ease; }
.kachel:hover img { transform: scale(1.05); }

/* Overlay und Linie als separate Pseudo-Elemente der Kachel */
.kachel::after { /* Der weiße Schleier */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.5rem; /* Höhe des Schleiers */
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}
.kachel::before { /* Die weiße Linie */
    content: '';
    position: absolute;
    bottom: 3.5rem; /* Positioniert die Linie genau über dem Schleier */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 1;
}

.kachel-text { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 3.5rem; /* Gibt dem Container eine feste Höhe */
    display: flex; /* Aktiviert Flexbox */
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
    padding: 0; /* Entfernt das alte Padding */
    background: transparent;
    color: var(--color-secondary);
    text-align: center; 
    z-index: 2;
    transition: color 0.7s ease;
}

.kachel h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
	font-weight: 450;
    margin: 0;
    padding: 0;
    border-top: none;
    display: block;
    text-shadow: none;
    transition: transform 0.7s ease; /* Übergang für den Zoom-Effekt */
}

/* Hover-Effekte */
.kachel:hover .kachel-text {
    color: white; /* Text wird beim Hovern weiß */
}
.kachel:hover h3 {
    transform: scale(1.1); /* Text zoomt beim Hovern ein */
    text-shadow: none;
}


/* Inhaltsseiten */
.page-header { background-color: var(--color-primary); padding: calc(var(--spacing) * 2) 0; text-align: center; border-bottom: 1px solid #E6B000; }
.page-header p { font-size: 1rem; margin-top: 0.5rem; color: var(--color-secondary); }
.text-content { padding-top: 1rem; }
.text-content .container { max-width: 800px; }
.text-content h2 { font-family: var(--font-heading); font-size: clamp(1rem, 5vw, 2rem); font-weight: 200; margin-top: 2.2rem; margin-bottom: 1rem; }
.text-content h2:first-child { margin-top: 0; }
.text-content p { margin-bottom: 1rem; }

/* Kontaktbereich wie im Original */
.contact { background-color: var(--color-background); color: var(--color-secondary); padding: calc(var(--spacing) * 2) 0; text-align: left; }
.contact h2 { font-family: var(--font-heading); font-size: clamp(1.53rem, 5.1vw, 2.125rem); font-weight: 400; margin-bottom: 1rem; }
.contact a { color: var(--color-text); text-decoration: underline; }

.site-footer {
    padding: 1rem 1rem;
    font-size: 0.9rem;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.footer-logo {
    height: 50px;
    width: auto;
}
.site-footer a { color: var(--color-text); }

/* --- SLIDESHOW STYLES --- */
.slideshow-container {
  position: relative;
  margin: 2rem 1rem 1rem;
  border-radius: 8px;
  overflow: hidden;
  height: 60vh; /* Höhe angepasst */
}
.slide { 
    display: none;
    height: 100%;
}
.slide img { 
    width: 100%; 
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
}
.fade { 
    animation-name: fade; 
    animation-duration: 3.5s; /* Dauer verlängert */
    animation-timing-function: ease-in-out; /* Sanfterer Übergang */
}

.dots-container { 
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center; 
    padding: 10px 0;
    z-index: 4;
}
.dot {
    height: 4px;
    width: 30px;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    display: inline-block;
    transition: background-color: 0.6s ease;
}
.dot.active, .dot:hover {
    background-color: #ffffff;
}

.slide-nav-prev, .slide-nav-next {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 50%;
    height: calc(100% - 45px); /* Full height minus the dots container */
    z-index: 3;
}
.slide-nav-prev { left: 0; }
.slide-nav-next { right: 0; }

/* --- GALLERY STYLES --- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}
.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* --- CONTENT SEPARATOR --- */
.content-separator-image {
    height: 600px;
    background-size: cover;
    background-position: center;
    margin: 2rem 1rem 0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* --- STILE FÜR TEXT AUF TRENNBILDERN --- */
.content-separator-image h2 {
    color: white; /* Setzt die Textfarbe auf Weiß */
    font-size: clamp(2rem, 8vw, 2.5rem); /* Macht den Text groß und responsiv */
	font-weight: 200;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0); /* Fügt einen Schatten für bessere Lesbarkeit hinzu */
    position: relative; /* Stellt sicher, dass der Text über dem Overlay liegt */
    z-index: 2;
}

/* --- INDIVIDUELLER MAUS-CURSOR --- */
.custom-cursor {
  position: fixed;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  background: rgba(255, 236, 179, 0.18);
  border: 2px solid #000000;
  box-shadow: 0 0 12px 2px #e6510033;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.15s, background 0.2s, border 0.2s;
  z-index: 9999;
  mix-blend-mode: multiply;
}
.custom-cursor.cursor-hover {
  width: 30px; height: 30px;
  background: rgba(255, 236, 179, 0.18);
  box-shadow: 0 0 5px 1px #FAFAFA;
}
.custom-cursor.cursor-click {
  transform: translate(-50%, -50%) scale(0.85);
  background: rgba(230, 81, 0, 0.25);
}

/* ------------------- */
/* Sehr kleine Smartphones */
/* ------------------- */
@media (min-width: 350px) {
    .hero {
        height: 30vh; /* Höhe für Smartphones */
    }
	.content-separator-image {
        height: 300px;
    }
	.slideshow-container {
        height: 300px; /* Höhe angepasst */
    }
    .site-footer {
        flex-direction: row;
        justify-content: space-between;
        padding: 1rem 1rem; /* Seitlicher Abstand auf 1rem erhöht */
    }
    .kachel-container { flex-direction: row; flex-wrap: wrap; }
    .kachel img {
        height: 300px; /* Erhöht die Höhe der Kachelbilder auf größeren Bildschirmen */
    }
}

/* ------------------- */
/* Tablet Breakpoint */
/* ------------------- */
@media (min-width: 600px) {
    .hero {
        height: 50vh; /* Höhe für Tablet */
    }
	.content-separator-image {
        height: 400px;
    }
	.slideshow-container {
        height: 400px; /* Höhe angepasst */
    }
    .site-footer {
        flex-direction: row;
        justify-content: space-between;
        padding: 1rem 1rem; /* Seitlicher Abstand auf 1rem erhöht */
    }
    .kachel-container { flex-direction: row; flex-wrap: wrap; }
    .kachel { width: calc(50% - (var(--spacing) / 2)); }
    .kachel img {
        height: 400px; /* Erhöht die Höhe der Kachelbilder auf größeren Bildschirmen */
    }
}

/* ------------------- */
/* Kleiner Desktop Breakpoint */
/* ------------------- */
@media (min-width: 900px) {
    .hero {
        height: 55vh;
    }
	.content-separator-image {
        height: 500px;
    }
	.slideshow-container {
        height: 500px; /* Höhe angepasst */
    }
    .nav-toggle { display: none; }
    .menu-overlay { display: none; }
    .nav-links { 
        position: static;
        flex-direction: row;
        width: auto;
        height: auto;
        background-color: transparent;
        padding: 0;
    }
    .nav-links li { margin: 0 0 0 1.5rem; width: auto; }
    .nav-links a { 
        font-size: 1.1rem; 
        color: var(--color-secondary);
        white-space: nowrap; /* Verhindert den Zeilenumbruch in den Menüpunkten */
        transition: transform 0.5s ease;
    }
    .nav-links a:hover {
        transform: scale(1.1);
    }
}

/* ------------------- */
/* Großer Desktop Breakpoint */
/* ------------------- */
@media (min-width: 1200px) {
	.hero {
        height: 75vh;
    }
    /* Die 4-Spalten-Regel wurde entfernt, damit die 2-Spalten-Ansicht vom Tablet-Breakpoint übernommen wird. */
	.content-separator-image {
        height: 600px;
    }
	.slideshow-container {
        height: 700px; /* Höhe angepasst */
    }
}

/* Cursor nur für Geräte mit präziser Zeigersteuerung anzeigen */
@media (pointer: coarse) {
  .custom-cursor { display: none !important; }
  * { cursor: auto !important; }
	}
	
/* ===== PARTNER-SEKTION 50/50-LAYOUT ===== */
.partner-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin: 2rem 0;
  overflow: hidden; /* sorgt dafür, dass abgerundete Ecken auch fürs Bild gelten */
}

/* Bild nimmt 50 % ein */
.partner-img {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.partner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0; /* wird durch übergeordnetes Element übernommen */
}

/* Text nimmt 50 % ein */
.partner-text {
  flex: 1 1 50%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: left;
}

.partner-text h2 {
  margin-top: 0;
  color: #000000;
  font-family: var(--font-heading);
  margin-bottom: 0.75rem;
}

.partner-text p {
  margin: 0.4rem 0;
  line-height: 1.5;
}

/* ---- Responsiv ---- */
@media (max-width: 768px) {
  .partner-section {
    flex-direction: column;
    text-align: left;
  }
  .partner-img,
  .partner-text {
    flex: 1 1 100%;
    width: 100%;
  }
  .partner-text {
    padding: 1rem;
  }
}
	
.partner-img img,
.partner-img .slideshow-container {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slideshow Styles (bei Bedarf individuell anpassen) */
.leonardo-slideshow {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: #ececec;
}
.leonardo-slideshow .slide {
  display: none;
  width: 100%;
  height: 100%;
}
.leonardo-slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leonardo-slideshow .dots-container {
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  z-index: 1;
}
.leonardo-slideshow .dot {
  height: 12px; width: 12px; margin: 0 4px;
  background: #FFC300; border-radius: 50%; display: inline-block;
  opacity: 0.45; transition: opacity 0.3s;
  cursor: pointer;
}
.leonardo-slideshow .dot.active, .leonardo-slideshow .dot:hover { opacity: 1; }

@media (max-width: 768px) {
  .partner-img { height: 170px; }
}