/* Ellis Custom Styles - Logo with 30% Overhang + Right Navigation */

/* Ellis Brand Colors - Orange als Hauptfarbe */
:root {
	--color-primary: #FF8C42;        /* Orange als neue Hauptfarbe */
	--color-secondary: #8fbc8f;      /* Sanftes Grün */
	--color-accent: #d4af37;         /* Goldener Akzent */
	--color-orange: #FF8C42;         /* Elli Orange */
	--color-green: #2c5f5d;          /* Tiefes Heilungsgrün */
}

/* Ellis Professional Typography System */
* {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Hauptschrift: Euphoria Script für Brand & Headlines */
h1, .brand-text, .main-headline {
	font-family: 'Euphoria Script', cursive !important;
	font-weight: 400 !important;
	letter-spacing: 1px !important;
	color: var(--color-orange) !important;
}

/* Spezielle Styling für Euphoria Script Headlines */
.main-headline {
	font-size: 3.2rem !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
	margin-bottom: 1.5rem !important;
}

/* Brand Text im Footer */
.brand-text {
	font-size: 1.1rem !important;
	color: var(--color-accent) !important;
}

/* Elegante Serif für Überschriften */
h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-weight: 500 !important;
	letter-spacing: -0.5px !important;
	line-height: 1.3 !important;
}

/* Clean Sans-Serif für Body Text & Navigation */
p, span, div, a, input, textarea, button, nav {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
}

/* Navigation spezielle Typografie */
#header nav a {
	font-family: 'Inter', sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: 0.5px !important;
	text-transform: none !important;
}

/* Headlines Größen-System */
h1 { font-size: 2.8rem !important; }
h2 { font-size: 2.2rem !important; }
h3 { font-size: 1.8rem !important; }
h4 { font-size: 1.4rem !important; }
h5 { font-size: 1.2rem !important; }
h6 { font-size: 1.1rem !important; }

/* Body Text Optimierung */
p {
	font-size: 1.1rem !important;
	font-weight: 400 !important;
	color: rgba(0, 0, 0, 0.8) !important;
}

/* Button Typography */
.button, input[type="submit"] {
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	font-size: 0.9rem !important;
}

/* Ellis Custom Section Styles */

/* Intro Section - Parallax-Effekt mit Engel */
#intro {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%), url('/images/energiefeld-heilung.webp') center/cover no-repeat fixed;
	color: #2c5f5d !important;
	display: flex !important;
	align-items: center !important;
	padding: 2rem !important;
	position: relative; /* Notwendig für Parallax */
	min-height: 85vh !important; /* Reduzierte Höhe */
}

#intro .content {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important; /* Stellt sicher, dass Engel und Text zusammen zentriert sind */
	width: 100% !important;
	max-width: 1200px !important; /* Reduziert für bessere Harmonie */
	margin: 0 auto !important;
	position: relative; /* Stellt sicher, dass der Inhalt über dem Hintergrund liegt */
	z-index: 2;
}

#intro .ellis-engel {
	flex: 0 0 45% !important; /* Mehr Raum für den Engel */
	align-self: stretch !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

#intro .ellis-engel img {
	height: 90% !important; /* 90% der Sektionshöhe */
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
	display: block !important;
}

#intro .text-content {
	flex: 1;
	padding: 3rem 3.5rem !important;
	margin-left: -5rem; /* Leichter Überhang über den Engel */
	z-index: 10;
	max-width: 50%;
}

#intro .text-content .main-headline {
	font-size: 5.0rem !important; /* 20% größer */
	color: var(--color-primary) !important;
	margin-bottom: 1.5rem !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

#intro .text-content p {
	font-size: 1.6rem !important; /* 20% größer */
	line-height: 1.7 !important;
	color: var(--color-green) !important;
	margin-bottom: 0 !important; /* Kein Abstand mehr zum Button */
	font-weight: 300 !important; /* Dünne Schrift */
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

#intro .button {
	display: none !important; /* Button wird versteckt */
}

#intro .button:hover {
	background: var(--color-green) !important;
	color: white !important;
	transform: none !important;
}

/* Down Arrow from Big Picture Template */
.button.down {
	position: absolute !important;
	/* Positioning unified below in 'Down arrows positioning' */
	width: 4rem !important;
	height: 4rem !important;
	line-height: 4rem !important;
	padding: 0 !important;
	border-radius: 100% !important;
	font-size: 1.5rem !important;
	text-indent: -9999px; /* Hide text */
}

.button.down::before {
	content: '\f078'; /* Font Awesome down arrow */
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-indent: 0;
	line-height: inherit;
	text-align: center;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* Allgemeine Button Styles wie HTML5UP */
.button.style2 {
	background: none !important;
	color: white !important;
	border: 2px solid white !important;
	padding: 0.75rem 1.5rem !important;
	font-size: 0.9rem !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	display: inline-block !important;
	transition: all 0.3s ease !important;
	font-weight: 600 !important;
	letter-spacing: 0.075em !important;
	text-transform: uppercase !important;
}

.button.style2:hover {
	background: white !important;
	color: #2c5f5d !important;
}

/* Section One - Heilungsenergie Hintergrund */
#one {
	background: linear-gradient(rgba(44, 95, 93, 0.7), rgba(44, 95, 93, 0.8)), url('/images/energiefeld-heilung.webp') center/cover no-repeat fixed !important;
	position: relative !important;
	justify-content: center !important; /* Box vertikal zentrieren */
	align-items: center !important; /* Box horizontal zentrieren */
	min-height: 80vh !important;
}

#one .content.box {
	background: rgba(255, 255, 255, 0.85) !important; /* Gleiche Transparenz wie #two */
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border-radius: 5px !important;
	padding: 2.4rem 3rem !important; /* Höhe reduziert, Breite angepasst */
	width: 48% !important; /* 20% breiter */
	max-width: 840px !important; /* 20% breiter */
	margin: 0 !important; /* Zentriert, kein Abstand */
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

#one .content.box.visible {
	transform: translateY(0) !important;
	opacity: 1 !important;
}

/* Unified Section Typography (based on #one) */
#one .content.box h2,
#two .content.box h2,
#work .content header h2,
#contact .content header h2 {
	font-family: 'Euphoria Script', cursive !important;
	font-size: 3.2rem !important;
	color: var(--color-green) !important;
	text-align: center !important;
	margin-bottom: 2rem !important;
}

#one .content.box p,
#two .content.box p,
#work .content header p,
#contact .content header p {
	font-size: 1.3rem !important;
	line-height: 1.8 !important;
	color: var(--color-green) !important;
	text-align: center !important;
	font-style: italic !important;
}

/* Button positioning wie HTML5UP */
#one .button.anchored {
	position: absolute !important;
	bottom: 2rem !important;
	right: 2rem !important;
	left: auto !important;
	transform: none !important;
}

/* Globale Box Animation für alle Sections - HTML5UP Style */
.main .content.box {
	transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
	opacity: 0 !important;
	transform: translateY(3rem) !important; /* Default fallback */
}

.main.left .content.box {
	transform: translateX(-15rem) !important;
}

.main.right .content.box {
	transform: translateX(5rem) !important;
}

.main .content.box.visible {
	transform: translateX(0) translateY(0) !important;
	opacity: 1 !important;
}

.main.style2:not(.inactive) .content.box,
.main.style1:not(.inactive) .content.box {
	opacity: 1 !important;
	transform: translateX(0) translateY(0) !important;
}

/* Section-spezifische Styling wie HTML5UP */
#two {
	position: relative !important;
	background: url('/images/ueber-mich-background.webp') center/cover no-repeat fixed !important;
	justify-content: center !important; /* Box horizontal zentrieren */
	align-items: center !important; /* Box vertikal zentrieren */
	min-height: 80vh !important;
}

#two .content.box {
	background: rgba(255, 255, 255, 0.85) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	padding: 2.4rem 3rem !important; /* Höhe reduziert, Breite angepasst */
	border-radius: 5px !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
	width: 48% !important; /* 20% breiter */
	max-width: 840px !important; /* 20% breiter */
	margin: 0 !important; /* Zentriert, kein Abstand */
}

#two .button.anchored {
	position: absolute !important;
	bottom: 2rem !important;
	right: 2rem !important;
}

#two .content.box footer {
	text-align: right !important;
}

#two .content.box .button.style2 {
	background-color: transparent !important;
	color: white !important;
	border: 2px solid rgba(255, 255, 255, 0.7) !important;
	box-shadow: 0 0 15px rgba(44, 95, 93, 0.5) !important; /* Weicher Schatten in Box-Text-Farbe */
	text-shadow: 0 0 8px rgba(44, 95, 93, 0.6) !important; /* Text-Schatten in Box-Text-Farbe */
	transition: all 0.4s ease !important;
}

#two .content.box .button.style2:hover {
	background-color: transparent !important;
	color: white !important;
	border-color: white !important;
	box-shadow: 0 0 25px rgba(255, 255, 255, 0.5) !important; /* Weicher, leuchtender Rand beim Hover */
	text-shadow: none !important; /* Text-Schatten beim Hover entfernen für klaren Effekt */
}

#work {
	padding-top: 4em !important;
}

/* HTML5UP Style Intro Animations */
#intro {
	overflow: hidden !important;
}

#intro .content {
	animation: fadeInUp 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both !important;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(3rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Down Arrow Animation */
.down-arrow {
	animation: bounce 2s infinite !important;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10px);
	}
	60% {
		transform: translateY(-5px);
	}
}

/* Fullscreen sections styling */
.main.fullscreen {
	min-height: 100vh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-direction: column !important;
	position: relative !important;
}

/* Down arrows positioning */
.button.down {
	position: absolute !important;
	bottom: 2rem !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
}

.button.down.anchored {
	transform: none !important;
}

/* Mobile Navigation - Left Sidebar Style */
@media screen and (max-width: 736px) {
  /* Hamburger Icon positioning */
  .hamburger-menu {
    position: fixed !important;
    top: 1rem !important;
    left: 1rem !important;
    z-index: 10001 !important;
  }

  /* Mobile navigation as left sidebar */
  #header nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.15) !important;
    padding: 2rem 1.5rem !important;
    z-index: 10000 !important;
    overflow-y: auto !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
  }

  #header nav.active {
    transform: translateX(0) !important;
  }

  /* Header adjustments for mobile */
  #header {
    justify-content: center !important;
  }

  /* Content centering for intro section - Optimiert für mehr Textbreite */
  #intro .content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 0.5rem !important;
  }

  #intro .centered-content {
    margin-top: 1.5rem !important;
  }

  /* Engel-Bild perfekt zentrieren - Kompakter für mehr Textplatz */
  #intro .ellis-engel {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 1.5rem auto !important;
    width: 100% !important;
  }

  #intro .ellis-engel img {
    max-width: 200px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Text-Content perfekt zentrieren - Maximale Breite nutzen */
  #intro .text-content {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 0.5rem !important;
  }
}

/* Logo & Navigation Styling */
#header h1 {
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
}

.ellis-logo {
	height: 60px !important; /* fits within 80px header comfortably */
	max-height: 60px !important;
	width: auto !important;
	display: block !important;
	transition: all 0.3s ease !important;
	filter: drop-shadow(0 2px 4px rgba(255, 140, 66, 0.2)) !important;
}

#header nav {
	margin: 0 !important;
}

#header nav ul {
	display: flex !important;
	align-items: center;
	gap: 1.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

#header nav ul li {
	margin: 0 !important;
}

#header nav ul li a {
	font-family: 'Euphoria Script', cursive !important;
	font-size: 1.8rem !important; /* 20% smaller für Konsistenz */
	font-weight: 400 !important;
	letter-spacing: 1px !important;
	transition: all 0.3s ease !important;
	padding: 0.5rem 1rem !important;
	border-radius: 5px !important;
	color: var(--color-primary) !important;
	line-height: 1;
}

/* Hover-Effekt für Logo */
.ellis-logo:hover {
	transform: scale(1.05) !important;
	filter: drop-shadow(0 6px 12px rgba(255, 140, 66, 0.3)) !important;
}

/* Responsive Anpassungen */
@media screen and (max-width: 1280px) {
	#header {
		padding: 0.8rem 1.5rem !important;
	}
	
	.ellis-logo {
		height: 60px !important; /* fixed px to avoid em inheritance issues */
	}
	
	#header nav ul {
		gap: 1rem !important;
	}
	
	#header nav ul li a {
		font-size: 1em !important;
		padding: 0.4rem 0.8rem !important;
	}
	
	/* Responsive Typography */
	h1 { font-size: 2.4rem !important; }
	h2 { font-size: 1.9rem !important; }
	h3 { font-size: 1.6rem !important; }
	p { font-size: 1.05rem !important; }
	
	.main-headline { 
		font-size: 2.8rem !important; 
	}
	
	.brand-text { 
		font-size: 1.05rem !important; 
	}
	
	/* Responsive Intro Section - Mittelgroße Bildschirme */
	#intro .content {
		flex-direction: column !important;
		text-align: center !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 2rem 1rem !important;
	}

	#intro .ellis-engel {
		margin-right: 0 !important;
		margin-bottom: 2rem !important;
		max-width: 300px !important;
		display: flex !important;
		justify-content: center !important;
	}

	#intro .text-content {
		padding: 0 1rem !important;
		text-align: center !important;
		max-width: 100% !important;
		margin: 0 auto !important;
	}

	#intro .text-content .main-headline {
		font-size: 3rem !important;
		text-align: center !important;
	}

	#intro .text-content p {
		font-size: 1.3rem !important;
		line-height: 1.5 !important;
		text-align: center !important;
	}
}

@media screen and (max-width: 736px) {
	#header {
		flex-direction: column !important;
		padding: 1rem !important;
		text-align: center !important;
	}
	
	.ellis-logo {
		height: 52px !important; /* fixed px to avoid em inheritance issues */
		margin-bottom: 1rem !important;
	}
	
	#header nav ul {
		flex-direction: column !important;
		gap: 0.5rem !important;
		width: 100% !important;
	}
	
	#header nav ul li a {
		font-size: 1.1em !important;
		padding: 0.8rem 1rem !important;
		display: block !important;
		width: 100% !important;
	}
	
	/* Mobile Typography */
	h1 { font-size: 2rem !important; }
	h2 { font-size: 1.6rem !important; }
	h3 { font-size: 1.4rem !important; }
	p { font-size: 1rem !important; }
	
	.main-headline { 
		font-size: 2.4rem !important; 
		margin-bottom: 1rem !important;
	}
	
	.brand-text { 
		font-size: 1rem !important; 
	}
	
	/* Mobile Responsive Intro - Optimiert für maximale Textbreite */
	#intro .content {
		flex-direction: column !important;
		text-align: center !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 1.5rem 0.5rem !important;
	}

	#intro .ellis-engel {
		margin-right: 0 !important;
		margin-bottom: 1.5rem !important;
		max-width: 200px !important;
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
	}

	#intro .ellis-engel img {
		max-width: 200px !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
		display: block !important;
	}

	#intro .text-content {
		padding: 0 0.5rem !important;
		text-align: center !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
	}

	#intro .text-content .main-headline {
		font-size: 2.4rem !important;
		text-align: center !important;
		margin: 0 auto 1rem auto !important;
	}

	#intro .text-content p {
		font-size: 1.1rem !important;
		line-height: 1.4 !important;
		text-align: center !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		padding: 0 0.25rem !important;
	}
	
	#one .content.box {
		padding: 1.5rem 1rem !important;
		margin: 0.5rem !important;
	}
}

/* Contact Section Layout */
.contact-wrapper {
	display: flex;
	align-items: flex-start; /* Oben ausrichten für besseren Flow */
	justify-content: center; /* Zentriert die Haupt-Wrapper */
	gap: 4rem;
	width: 100%;
	max-width: 1200px; /* Etwas mehr Platz */
	margin: 0 auto;
}

.contact-text {
	flex: 1;
	max-width: 40%; /* Schmaler, um Grid nach links zu rücken */
	padding-top: 1rem; /* Kleiner Abstand oben für Ausrichtung */
}

.contact-text header {
	text-align: left;
}

.contact-text header h2,
.contact-text header p {
	text-align: left !important;
}

.oeffnungszeiten-hinweis {
	font-size: 1rem !important;
	color: rgba(255, 255, 255, 0.7) !important;
	font-style: italic !important;
	margin-top: 1.5rem !important;
	text-align: left !important;
}

.contact-info-box {
	flex: 1;
	max-width: 60%; /* Breiter für das Grid */
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

.contact-method {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	padding: 1.2rem;
	border-radius: 5px;
	transition: all 0.3s ease;
	border-left: 3px solid var(--color-primary);
}

.contact-method:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.contact-method .icon {
	font-size: 1.8rem;
	color: var(--color-primary);
	margin-right: 1.2rem;
}

.contact-method div {
	text-align: left;
}

.contact-method h3 {
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	color: white !important;
	margin: 0 0 0.25rem 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.contact-method a, .contact-method span {
	font-size: 1rem !important;
	color: var(--color-primary) !important; /* Geändert zu Primärfarbe */
	text-decoration: none;
	font-family: 'Inter', sans-serif !important;
	font-weight: 500 !important; /* Etwas dicker für Lesbarkeit */
}

.contact-method a:hover {
	color: white !important;
}

@media screen and (max-width: 980px) {
	.contact-wrapper {
		flex-direction: column;
		gap: 3rem;
		align-items: center; /* Zentriert auf Tablets */
	}
	.contact-text, .contact-info-box {
		max-width: 100%;
		text-align: center;
	}
	.contact-text header h2,
	.contact-text header p,
	.oeffnungszeiten-hinweis {
		text-align: center !important;
	}
	.contact-info-box {
		width: 100%;
		max-width: 600px;
	}
}

@media screen and (max-width: 736px) {
	.contact-method {
		width: 100%;
	}
	.contact-info-box {
		grid-template-columns: 1fr;
	}
}

/* Gallery Overlay Styles */
.gallery article .image {
	position: relative;
	display: block;
}

.gallery article .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(44, 95, 93, 0.95) 0%, rgba(44, 95, 93, 0.7) 50%, rgba(44, 95, 93, 0.3) 100%);
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem;
	opacity: 0; /* Standardmäßig unsichtbar */
	transition: opacity 0.4s ease;
	z-index: 2; /* Über dem caption */
}

.gallery article a:hover .overlay {
	opacity: 1; /* Sichtbar bei Hover */
}

.gallery article .caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%; /* Füllt die ganze Karte aus */
	padding: 1.5rem;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
	color: white;
	text-align: center;
	z-index: 1;
	transition: opacity 0.4s ease;
	display: flex; /* Flexbox für Zentrierung */
	flex-direction: column; /* Untertitel unter Überschrift */
	justify-content: center; /* Vertikale Zentrierung */
	align-items: center; /* Horizontale Zentrierung */
}

.gallery article a:hover .caption {
	opacity: 0;
}

.gallery article .caption h3 {
	font-family: 'Euphoria Script', cursive !important;
	font-size: 2.75rem !important; /* 10% größer */
	color: white !important; /* Weiße Schriftfarbe */
	margin: 0 0 0.5rem 0 !important;
	text-shadow: 0 2px 5px rgba(0,0,0,0.5);
	position: relative;
	width: 100%;
}

.gallery article .caption span {
	font-family: 'Inter', sans-serif !important;
	font-size: 1.1rem !important;
	font-weight: 300 !important;
	color: rgba(255,255,255,0.9) !important;
	letter-spacing: 0.5px;
	position: absolute; /* Positioniert am unteren Rand */
	bottom: 1.5rem; /* Abstand vom unteren Rand */
	left: 0;
	right: 0;
}

/* Hover Effects für Navigation */
#header nav ul li a:hover {
	background: rgba(255, 140, 66, 0.1) !important;
	color: var(--color-green) !important;
	transform: translateY(-2px) !important;
}

/* Elli Unterschrift Styles */
.signature-section {
	margin: 3rem 0 2rem;
	text-align: center;
}

.signature-container {
	display: inline-block;
	padding: 1rem 2rem;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.8));
	border-radius: 15px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 140, 66, 0.1);
}

.signature-image {
	max-width: 200px;
	height: auto;
	filter: hue-rotate(15deg) brightness(0.8);
	transition: all 0.3s ease;
}

.signature-image:hover {
	transform: scale(1.05);
	filter: hue-rotate(0deg) brightness(1);
}

/* Mobile Anpassungen für Unterschrift */
@media screen and (max-width: 768px) {
	.signature-container {
		padding: 0.8rem 1.5rem;
	}
	
	.signature-image {
		max-width: 150px;
	}
}