/* CSS-Variablen */
:root {
  --bg: #E0E7FF;
  --header: #3B82F6;
  --accent: #F59E0B;
  --text: #506184;
}

[data-theme="dark"] {
  --bg: #1E3A8A;
  --header: #4B5EAA;
  --accent: #FBBF24;
  --text: #6880B0;
}

/* Grundlegendes Styling */
body {
  font-family: 'Inter', sans-serif; /* Hauptschriftart für den gesamten Text */
  color: var(--text); /* Textfarbe basierend auf dem Modus */
  background-color: var(--bg); /* Hintergrundfarbe basierend auf dem Modus */
  line-height: 1.6; /* Für bessere Lesbarkeit von Absätzen */
  transition: background-color 0.3s ease, color 0.3s ease; /* Sanfter Übergang bei Moduswechsel */
}

/* Überschriften-Styling */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif; /* Schriftart für Überschriften */
  color: var(--header); /* Farbe für Überschriften basierend auf dem Modus */
  margin-top: 1.5em; /* Abstand nach oben */
  margin-bottom: 0.5em; /* Abstand nach unten */
  line-height: 1.2;
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1em; }


/* Allgemeine Link-Styles */
a {
  color: var(--accent); /* Links in Akzentfarbe */
  text-decoration: none; /* Unterstreichung entfernen */
  transition: color 0.3s ease;
}

a:hover {
  color: var(--header); /* Leichter Farbwechsel bei Hover */
  text-decoration: underline; /* Unterstreichung bei Hover hinzufügen */
}

/* Grundlegende Sichtbarkeit */
body *, section, article, .gallery-item, .slide, iframe, img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Animationen */
@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes zoomIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes glow {
  0% { box-shadow: 0 0 5px hsla(330, 100%, 50%, 0.5); } /* Angepasst an das neue Pink */
  50% { box-shadow: 0 0 20px hsla(330, 100%, 50%, 0.8); } /* Angepasst an das neue Pink */
  100% { box-shadow: 0 0 5px hsla(330, 100%, 50%, 0.5); } /* Angepasst an das neue Pink */
}
@keyframes wiggle {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
@keyframes sparkle {
  0% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
  50% { text-shadow: 0 0 10px var(--accent); } /* Verwendet die Akzentfarbe */
  100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
}
@keyframes bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes 3d-tilt {
  0% { transform: perspective(500px) rotateX(0deg) rotateY(0deg); }
  100% { transform: perspective(500px) rotateX(5deg) rotateY(5deg); }
}
@keyframes image-frame-glow {
  0% { box-shadow: 0 0 5px hsla(330, 100%, 50%, 0.3); } /* Angepasst an das neue Pink */
  50% { box-shadow: 0 0 15px hsla(330, 100%, 50%, 0.6); } /* Angepasst an das neue Pink */
  100% { box-shadow: 0 0 5px hsla(330, 100%, 50%, 0.3); } /* Angepasst an das neue Pink */
}
@keyframes wave {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes scroll-reveal {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hover-zoom {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.05); filter: brightness(1.1); }
}
@keyframes icon-glow {
  0% { filter: drop-shadow(0 0 0 rgba(255, 0, 119, 0)); } /* Angepasst an das neue Pink (FF0077) */
  50% { filter: drop-shadow(0 0 10px var(--accent)); } /* Verwendet die Akzentfarbe */
  100% { filter: drop-shadow(0 0 0 rgba(255, 0, 119, 0)); } /* Angepasst an das neue Pink (FF0077) */
}
@keyframes heading-animate {
  0% { transform: translateY(0); color: var(--header); scale: 1; }
  100% { transform: translateY(-5px); color: var(--accent); scale: 1.05; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Klassen */
.animate-zoom-in { animation: zoomIn 0.8s ease-out; }
.animate-glow { animation: glow 1.5s infinite; }
.animate-wiggle:hover { animation: wiggle 0.3s ease; }
.animate-sparkle { animation: sparkle 1s infinite; }
.animate-bounce-on-click:active { animation: bounce 0.3s ease; }
.animate-pulse { animation: pulse 1.5s infinite; }
.animate-scroll-reveal { opacity: 0; transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.animate-scroll-reveal.visible { opacity: 1; animation: scroll-reveal 0.5s ease-out; }
.image-frame:hover img { animation: hover-zoom 0.3s ease forwards; }
.social-link:hover .social-icon { animation: icon-glow 1s infinite; fill: var(--accent); } /* Füllfarbe auf Akzent anpassen */
.animate-heading { transition: transform 0.3s ease, color 0.3s ease, scale: 0.3s ease; }
.animate-heading.active { animation: heading-animate 0.4s ease forwards; }

/* Layout */
.parallax {
  background-image: linear-gradient(to bottom, rgba(27, 38, 59, 0.8), rgba(27, 38, 59, 0.5)), url('../images/header-background.jpg'); /* Angepasst an Dark-Mode --bg */
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.slider-container { position: relative; overflow: hidden; width: 100%; }
.slider { display: flex; flex-direction: row; transition: transform 0.5s ease-in-out; width: calc(100% * 6); }
.slide { flex: 0 0 calc(100% / 6); min-width: calc(100% / 6); box-sizing: border-box; opacity: 1; transition: opacity 0.5s ease-in-out; }
.slide.active { opacity: 1; }
.slider-nav { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); }
.slider-nav button { background: var(--header); color: var(--text); border: none; padding: 10px 20px; cursor: pointer; transition: background 0.3s ease, transform 0.3s; } /* Farben angepasst */
.slider-nav button:hover { background: var(--accent); transform: scale(1.2); } /* Farben angepasst */
.social-icon { fill: var(--accent); transition: transform 0.3s ease, fill 0.3s ease; } /* Fill auf Akzentfarbe */
.image-frame { position: relative; overflow: hidden; border-radius: 8px; transition: box-shadow 0.3s ease; }
.image-frame:hover { animation: image-frame-glow 1s infinite alternate; }
iframe { width: 100%; aspect-ratio: 16 / 9; }
.wave-bg { 
  position: absolute; bottom: 0; left: 0; width: 200%; height: 50px; 
  /* Angepasst an neue Farben - Pink (330,100%,50%) und Header im Dark mode (220,50%,30% aus #6BA6FF) */
  background: linear-gradient(to right, hsla(330, 100%, 50%, 0.2) 0%, hsla(220, 50%, 30%, 0.5) 50%, hsla(330, 100%, 50%, 0.2) 100%); 
  animation: wave 15s linear infinite; 
}
.parallax-canvas { transform: translateZ(-10px) scale(1.1); transition: transform 0.1s ease-out; }

/* Lightbox */
.lightbox { animation: fadeIn 0.4s ease-out; }
.lightbox img { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
#close-lightbox { cursor: pointer; transition: transform 0.2s ease; color: var(--text); } /* Farbe angepasst */
#close-lightbox:hover { transform: scale(1.2); color: var(--accent); }

/* Sprachumschaltung */
.lang-de { display: inline-block; opacity: 1; }
.lang-hr { display: none; opacity: 0; }
.lang-hr-active .lang-de { display: none; opacity: 0; }
.lang-hr-active .lang-hr { display: inline-block; opacity: 1; }

/* Text-Styling */
section p { line-height: 1.6; }

/* Barrierefreiheit und Responsiveness */
@media (min-width: 768px) {
  .slider { flex-wrap: nowrap; }
  .gallery-item { display: block; }
}
@media (max-width: 767px) {
  .slider-nav button { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .animate-glow, .animate-3d-tilt, .animate-wiggle, .animate-zoom-in, h2.animate-heading, .animate-scroll-reveal, .animate-bounce-on-click, .animate-pulse, .image-frame:hover img, .social-link:hover .social-icon, .slider, .lightbox, .parallax-canvas {
    animation: none !important;
    transition: none !important;
  }
  .social-link:hover .social-icon { transform: none; fill: var(--accent); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } /* Fill auf Akzentfarbe */
  .slider-nav button:hover { transform: none; }
  .image-frame:hover img { transform: none; filter: none !important; }
  .parallax-canvas { transform: none !important; }
}