/* Fonts */
@font-face {
  font-family: 'Puffin Display';
  src: url('../fonts/PuffinDisplay-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Puffin Display';
  src: url('../fonts/PuffinDisplay-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Open Sans */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-v44-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-v44-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-v44-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-v44-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-v44-latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-brown-dark: #50402F;
  --color-black: #1E1E1E;
  --color-white-off: #F7F6F2;
  --color-yellow: #FFB400;
  --color-green-dark: #276140;
  --color-green-light: #65B937;

  --font-headline: "Puffin Display", sans-serif;
  --font-text: "Open Sans", sans-serif;

  --container-width: 1400px;
  --header-height: 140px;
  --header-height-scrolled: 90px;
}

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: 50px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-text);
  color: var(--color-black);
  background-color: #fff;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.headline {
  font-family: var(--font-headline);
  font-weight: 800;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.container--narrow {
  max-width: 900px;
}


/* Textblock (Fließtext) */
.textblock {
  padding: 40px 0;
}

.textblock-inner {
  max-width: 100%;
  /* Default: Fallback to container width */
}

.textblock--narrow .textblock-inner {
  max-width: 700px;
}

.textblock--medium .textblock-inner {
  max-width: 1000px;
}

.textblock--wide .textblock-inner {
  max-width: 1200px;
}

.textblock--full .textblock-inner {
  max-width: 100%;
}

.textblock-headline {
  font-family: var(--font-headline);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--color-green-dark);
  margin-bottom: 20px;
}

.textblock-content {
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-black);
  margin-bottom: 0;
  max-width: none;
  /* Override section-text limit */
}

.textblock-content h1 {
  font-family: var(--font-headline);
  font-size: 3.5rem;
  color: var(--color-green-dark);
  line-height: 1.1;
  margin-top: 40px;
  margin-bottom: 25px;
}

.textblock-content h2 {
  font-family: var(--font-headline);
  font-size: 2.8rem;
  color: var(--color-green-dark);
  line-height: 1.1;
  margin-top: 35px;
  margin-bottom: 20px;
}

.textblock-content h3 {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  color: var(--color-green-light);
  margin-top: 30px;
  margin-bottom: 10px;
}

.textblock-content p {
  margin-bottom: 16px;
}

.textblock-content ul,
.textblock-content ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.textblock-content li {
  margin-bottom: 6px;
}

.textblock-content a {
  color: var(--color-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.textblock-content a:hover {
  color: var(--color-green-light);
}

.textblock-content strong {
  font-weight: 700;
}

.textblock--small .textblock-content {
  font-size: 0.9rem;
  line-height: 1.7;
}

.textblock--large .textblock-content {
  font-size: 1.2rem;
  line-height: 1.8;
}

/* Hyphenation */
.hyphenate {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  word-wrap: break-word;
}

/* Header Styles */
.header {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 30px 0;
  background-color: #fff;
  /* Solid white background */
  z-index: 9000;
  transition: padding 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.5s ease, background-color 0.3s ease;
}

body.menu-open .header {
  background-color: transparent !important;
  box-shadow: none !important;
  z-index: 20000 !important;
  /* Force above overlay */
  position: fixed !important;
  /* Ensure it stays at the top regardless of scroll position */
  top: 0;
  pointer-events: none;
  /* Let clicks pass through to menu */
}

body.menu-open .header .container {
  /* But allow clicking the burger/logo */
  pointer-events: none;
}

body.menu-open .burger-menu {
  pointer-events: auto;
  /* Re-enable burger clicks */
}

/* Optional: Hide other header elements if they distract */
body.menu-open .header-right .phone-link,
body.menu-open .logo {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.header.is-scrolled {
  padding: 15px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .logo img {
  height: 80px;
  width: auto;
  transition: height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.header.is-scrolled .logo img {
  height: 60px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 70px;
  transition: gap 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.header.is-scrolled .header-right {
  gap: 20px;
}

.phone-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-green-dark);
  text-decoration: none;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.4rem;
  overflow: hidden;
  /* For text animation */
}

.phone-link span {
  display: inline-block;
  white-space: nowrap;
  max-width: 300px;
  transition: max-width 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease, margin 0.5s ease;
}

.header.is-scrolled .phone-link span {
  max-width: 0;
  opacity: 0;
  margin-right: -10px;
}

.phone-icon {
  background: #f0f4f1;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone-icon svg {
  width: 32px;
  height: 32px;
  fill: var(--color-green-dark);
}

/* Burger Menu */
.burger-menu {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 10001;
  /* Above overlay */
  position: relative;
}

/* Fix clipped burger menu - Ensure container is big enough */

.burger-line {
  display: block;
  width: 40px;
  height: 4px;
  background-color: var(--color-green-dark);
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform-origin: center;
}

/* Burger Animation State */
body.menu-open .burger-line:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
  background-color: #fff;
}

body.menu-open .burger-line:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

body.menu-open .burger-line:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
  background-color: #fff;
}

/* Fullscreen Menu */
body.menu-open {
  overflow: hidden;
  height: 100vh;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background-color: var(--color-green-dark);
  z-index: 9999;

  /* Smooth Fade In */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0.5s ease;

  color: #fff;
  overflow: visible;
  /* ALLOW shadow to be seen below */
  /* Prevent scrolling into deep background */

  /* The "Curtain" is now a solid shadow. It is physically impossible for this
     to have a different timing/opacity than the menu itself. */
  box-shadow: 0 100vh 0 0 var(--color-green-dark);
}

.menu-overlay.is-open {
  visibility: visible;
  opacity: 1;
}

.menu-wrapper {
  height: 100dvh;
  /* Lock content to viewport */
  overflow-y: auto;
  /* Content handles its own scrolling */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.menu-header {
  padding: 40px 0;
  display: flex;
  justify-content: flex-end;
  /* Close button is now effectively the burger, but let's hide the old one if it exists or keep spacing */
  height: 80px;
  /* Match header height to align if needed */
}

/* Hide old close button as burger handles it */
.close-button {
  display: none;
}

.menu-body {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 100px;
  position: relative;
}

.main-nav {
  width: 50%;
}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav li {
  margin-bottom: 10px;
}

.main-nav a {
  font-family: var(--font-headline);
  font-size: 5rem;
  font-weight: 900;
  text-decoration: none;
  color: #fff;
  line-height: 1.1;
  display: inline-block;
  position: relative;
  padding: 5px 20px;
  z-index: 1;
}

.main-nav a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--color-yellow);
  z-index: -1;
  transition: width 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.main-nav a:hover::before {
  width: 100%;
}

.menu-info-area {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
}

.menu-contact {
  margin-bottom: 60px;
  font-size: 2rem;
  font-weight: 800;
  font-family: var(--font-headline);
}

.menu-contact p {
  margin: 5px 0;
}

.menu-contact a {
  color: #fff;
  text-decoration: none;
}

.footer-nav {
  width: 100%;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 30px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
}

/* Hero Section Styles */
.hero {
  position: relative;
  width: 100%;
  padding: 0 30px 30px 30px;
  /* Consistent 30px padding on all sides */
  scroll-margin-top: 50px;
}

.hero-container {
  position: relative;
  width: 100%;
  height: calc(100svh - var(--header-height) - 30px);
  /* Use svh to better handle browser UI, minus header and bottom gap */
  min-height: 600px;
  border-radius: 40px;
  overflow: hidden;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .hero-container {
    height: calc(100svh - 120px - 20px);
    min-height: 500px;
  }
}

@media (max-height: 800px) {
  .hero-container {
    min-height: 450px;
  }
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(39, 97, 64, 0.7) 0%, rgba(39, 97, 64, 0.2) 100%);
}

.hero-overlay .container {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.hero-content {
  max-width: 600px;
  color: #fff;
}

.hero-content h1 {
  font-size: 5rem;
  line-height: 1.1;
  margin-bottom: 20px;
  font-weight: 800;
}

.hero-content p {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 40px;
  font-weight: 600;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background-color: var(--color-yellow);
  color: var(--color-green-dark);
  padding: 15px 35px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
  transition: background-color 0.2s ease;
  margin-bottom: 20px;
  cursor: pointer;
}

.btn-primary-icon {
  display: flex;
  align-items: center;
  position: relative;
  top: 1px;
  /* Your adjustment: 1px for centering */
  transition: transform 0.2s ease;
}

.btn-primary svg {
  width: 30px;
  height: 30px;
  display: block;
}

/* Default: Arrow moves right (e.g. Hero) */
.btn-primary:hover .btn-primary-icon {
  transform: translateX(8px);
}

/* Back-Button: Arrow moves left (e.g. 404) */
.btn-primary:hover .btn-primary-icon:first-child {
  transform: translateX(-8px);
}

/* Subpage Hero Styles */
.subpage-hero {
  position: relative;
  width: 100%;
  padding: 0 30px 30px 30px;
  scroll-margin-top: 50px;
}

.subpage-hero-container {
  position: relative;
  width: 100%;
  height: 50vh;
  /* Reduced height compared to main hero */
  min-height: 450px;
  border-radius: 40px;
  overflow: hidden;
  margin: 0 auto;
}

.subpage-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subpage-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(39, 97, 64, 0.7) 0%, rgba(39, 97, 64, 0.2) 100%);
  display: flex;
  align-items: flex-end;
}

.subpage-hero-overlay .container {
  width: 100%;
  padding: 0 40px 60px 40px;
  /* Added padding to position bottom-left */
}

.subpage-hero-content h1 {
  font-size: 6rem;
  line-height: 1.1;
  font-weight: 800;
  color: #F7F6F2;
  margin: 0;
}

.subpage-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-yellow);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-family: var(--font-headline);
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.subpage-hero-badge .badge-label {
  font-weight: 600;
}

.subpage-hero-badge .badge-value {
  font-weight: 800;
}

.subpage-hero-subline {
  color: #F7F6F2;
  font-family: var(--font-headline);
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 0;
}

@media (max-width: 1200px) {
  .subpage-hero-content h1 {
    font-size: 4.5rem;
  }
}

@media (max-width: 768px) {
  .subpage-hero {
    padding: 0 15px 30px 15px;
  }

  .subpage-hero-container {
    height: 50vh;
    min-height: 300px;
    border-radius: 30px;
  }

  .subpage-hero-content h1 {
    font-size: 2.5rem;
  }

  .subpage-hero-badge {
    font-size: 0.9rem;
    padding: 5px 12px;
    margin-bottom: 15px;
  }

  .subpage-hero-subline {
    font-size: 1.2rem;
    margin-top: 8px;
  }
}

/* Global Section Styles */
.section {
  padding: 80px 0;
  scroll-margin-top: 50px;
}

.section-headline {
  color: var(--color-green-dark);
  font-family: var(--font-headline);
  font-size: 3.5rem;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 25px;
  line-height: 1.1;
}

.section-text {
  font-family: var(--font-text);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 850px;
  color: var(--color-black);
  margin-bottom: 50px;
}

.section-text strong,
.section-text b {
  font-weight: 800;
}

.section-subline {
  display: block;
  color: var(--color-green-light);
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 5px;
  letter-spacing: 0.05em;
}

.hyphenate {
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  /* Safety fallback */
}

.section-intro {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 900px;
  margin: 0 auto 60px auto;
  color: var(--color-green-dark);
}

/* Intro Section (Refactored) */
.intro-text {
  padding: 80px 0;
  background-color: #fff;
  scroll-margin-top: 50px;
}

.intro-content {
  max-width: 80%;
  margin: 0 auto;
  color: var(--color-green-dark);
}

.intro-content p {
  font-family: var(--font-headline);
  font-size: 2.0rem;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
}

/* Assortment Section */
.assortment-grid {
  display: flex;
  gap: 30px;
}

.assortment-card {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  display: block;
  position: relative;
  transition: flex 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.assortment-image-wrapper {
  position: relative;
  width: 100%;
  height: 450px;
  /* Fixed height to keep it constant on hover */
  border-radius: 30px;
  overflow: hidden;
  margin-bottom: 20px;
}

.assortment-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.assortment-btn {
  position: absolute;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  background-color: var(--color-yellow);
  border-radius: 23px;
  /* High radius for "rounded square" look */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: transform 0.3s ease;
  padding: 0;
  /* Ensure no padding interferes with centering */
}

.assortment-btn svg {
  width: 35px;
  height: 35px;
}

.assortment-title {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-green-dark);
  margin-top: 15px;
  white-space: nowrap;
}

/* Hover Effects logic (Flex-Grow 75/25, Constant Height) */
.assortment-grid:hover .assortment-card {
  flex: 0.6;
  /* Shrink others */
}

.assortment-grid .assortment-card:hover {
  flex: 1.4;
  /* Grow hovered */
}

.assortment-card:hover .assortment-image-wrapper img {
  transform: scale(1.1);
}

.assortment-card:hover .assortment-btn {
  transform: scale(1.1);
}

/* Features Block */
.features-block.has-box,
.downloads-block.has-box {
  padding: 100px 0;
}

.features-block.has-box .features-wrapper,
.downloads-block.has-box .features-wrapper {
  background-color: rgba(39, 97, 64, 0.1);
  /* 10% Dark Green */
  border-radius: 40px;
  padding: 80px 60px;
}

.features-header {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto 60px auto;
}

.features-grid {
  display: grid;
  gap: 40px;
}

.features-grid.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.features-grid.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.features-grid.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .features-grid.columns-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feature-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-icon-wrapper {
  width: 65px;
  height: 65px;
  background-color: var(--color-yellow);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px;
}

.feature-icon-wrapper img,
.feature-icon-wrapper svg {
  width: 36px;
  height: 36px;
  filter: brightness(0) invert(1);
  /* Force all icons to white */
}

.feature-title {
  color: var(--color-green-dark);
  font-family: var(--font-headline);
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 8px;
  /* Reduced from 15px */
  line-height: 1.2;
}

.feature-text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-black);
}

.feature-text.section-text {
  margin-bottom: 0;
}

/* Two-Column List Block */
.two-col-list-block {
  background-color: #fff;
  border-radius: 40px;
  padding: 100px 0;
  /* Match other sections padding */
}

.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}

.two-col-headline.section-headline {
  font-size: 2.8rem;
  /* Slightly smaller than main section headlines but larger than sub-features */
  margin-bottom: 30px;
}

.two-col-content.section-text {
  max-width: none;
  margin-bottom: 0;
}

.two-col-content ul {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

.two-col-content ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
}

.two-col-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-green-light);
  /* Lüske Light Green for bullets */
}

/* Contact Block */
.contact-grid {
  display: grid;
  grid-template-columns: 0.6fr 0.4fr;
  gap: 80px;
  align-items: start;
}

.contact-card-col {
  margin-top: 60px;
  /* Precise alignment with body text line height */
}

.contact-text-col .section-text {
  max-width: none;
  margin-bottom: 0;
}

.contact-card {
  background-color: var(--color-white-off);
  border-radius: 20px;
  padding: 40px;
}

.contact-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Single column layout as requested */
  gap: 30px;
}

.contact-card p {
  font-family: var(--font-text);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-black);
  margin: 0;
}

.contact-card strong {
  font-weight: 700;
  color: var(--color-black);
}

.contact-label {
  color: var(--color-black);
  font-weight: 700;
}

.contact-card a {
  color: var(--color-black);
  text-decoration: none;
  font-weight: normal;
}

.contact-card a:hover {
  text-decoration: underline;
}

/* Media & Text Block */
.media-text-block {
  overflow: hidden;
}

.media-text-container {
  display: flex;
  align-items: center;
  gap: 100px;
  /* Increased from 80px */
}

.layout-right .media-text-container {
  flex-direction: row-reverse;
}

/* Media Group Styling */
.media-group {
  flex: 1.2;
  position: relative;
  display: flex;
  /* Alignment is handled by specific layout classes below */
}

.layout-left .media-group {
  justify-content: flex-start;
}

.layout-right .media-group {
  justify-content: flex-end;
}

.has-overlapping .media-group {
  padding: 40px 0;
  /* Adjusted space */
}

.media-item {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  background-color: #eee;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
  /* Slightly subtler depth */
}

.media-content {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-item.ratio-auto .media-content {
  height: auto;
}

/* Overlapping Logic */
.has-overlapping .media-item.pos-bg {
  width: 75%;
  /* Middle ground size */
  z-index: 1;
}

.has-overlapping .media-item.pos-fg {
  width: 48%;
  /* Middle ground size */
  position: absolute;
  top: 55%;
  /* Closer to center, but still slightly offset */
  transform: translate(var(--offset-x, 0), calc(-45% + var(--offset-y, 0)));
  z-index: 2;
  border: none;
}

.layout-left .media-item.pos-fg {
  right: var(--offset-x, 0);
  left: auto;
}

.layout-right .media-item.pos-fg {
  left: var(--offset-x, 0);
  right: auto;
}

/* Ensure background image sticks to its outer edge */
.layout-left.has-overlapping .media-item.pos-bg {
  margin-left: 0;
  margin-right: auto;
}

.layout-right.has-overlapping .media-item.pos-bg {
  margin-right: 0;
  margin-left: auto;
}

/* Aspect Ratio Utilities (Modern CSS aspect-ratio) */
.ratio-original {
  aspect-ratio: auto;
}

.ratio-1-1 {
  aspect-ratio: 1 / 1;
}

.ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.ratio-3-4 {
  aspect-ratio: 3 / 4;
}

.ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.ratio-21-9 {
  aspect-ratio: 21 / 9;
}

/* Text Group Styling */
.text-group {
  flex: 1;
  max-width: 550px;
}


.layout-right .text-group {
  min-width: 0;
  word-break: break-word;
}

.btn-text-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: var(--color-green-dark);
  font-weight: 800;
  font-family: var(--font-headline);
  font-size: 1.25rem;
  transition: color 0.3s ease;
  margin-top: 20px;
}

.icon-circle {
  width: 45px;
  height: 45px;
  background-color: var(--color-yellow);
  border-radius: 15px;
  /* Same as the new button style */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: transform 0.3s ease;
}

.btn-text-with-icon:hover .icon-circle {
  transform: translateX(8px);
}

.icon-circle svg {
  width: 24px;
  height: 24px;
}

/* Footer Styling */
.footer {
  background-color: #F7F7F7;
  padding-top: 80px;
  color: var(--color-black);
  /* Changed to black for readability */
}

.footer-top {
  padding-bottom: 80px;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.footer-col {
  flex: 1;
  /* All columns equal width */
  font-size: 1rem;
  line-height: 1.6;
}

/* Single Media Adjustment */
.media-text-block.is-single .media-group {
  flex: 0.4;
  /* roughly 40% */
}

.media-text-block.is-single .text-group {
  flex: 0.6;
  /* roughly 60% */
  max-width: none;
}

.col-logo {
  flex: 1;
  /* Reset to equal width */
}

.footer-logo img {
  height: 80px;
  width: auto;
}

.col-address strong {
  display: block;
  margin-bottom: 5px;
  font-weight: 800;
}

.col-contact a {
  color: inherit;
  text-decoration: none;
}

.footer-main-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-main-nav li {
  margin-bottom: 10px;
}

.footer-main-nav a {
  text-decoration: none;
  color: var(--color-black);
  /* Black links */
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.1rem;
}

/* Footer Bottom Bar */
.footer-bottom {
  background-color: var(--color-green-dark);
  padding: 25px 0;
  color: #fff;
}

.footer-bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copyright {
  font-size: 0.9rem;
  font-weight: 700;
}

.footer-sub-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 40px;
}

.footer-sub-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
}

.footer-socials {
  display: flex;
  gap: 20px;
  align-items: center;
}

.footer-socials a {
  color: #fff;
}

.footer-socials svg {
  width: 24px;
  height: 24px;
}

/* Bilder Carousel Block */
.bilder-carousel-block {
  padding: 80px 0;
  width: 100%;
  overflow: hidden;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  /* Allow vertical scroll, we handle horizontal in JS */
  cursor: grab;
}

.bilder-carousel-block.is-dragging {
  cursor: grabbing;
}

.bilder-carousel-block img {
  -webkit-user-drag: none;
  /* Prevent browser image drag behavior */

}

.bilder-carousel-track {
  display: flex;
  width: max-content;
  align-items: center;
  /* Centering different heights */
}

.bilder-carousel-list {
  display: flex;
  gap: 50px;
  /* animation: marquee var(--carousel-speed, 30s) linear infinite; */
  padding-right: 50px;
  align-items: center;
  will-change: transform;
}

.bilder-carousel-item {
  flex-shrink: 0;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s ease;
}

.bilder-carousel-item:hover {
  transform: scale(1.02);
}

.bilder-carousel-item img {
  display: block;
  width: auto;
  object-fit: cover;
}

/* Variable Heights */
.bilder-carousel-item.is-portrait img {
  height: 650px;
  /* Increased from 550px as requested */
}

.bilder-carousel-item.is-landscape img,
.bilder-carousel-item.is-square img {
  height: 380px;
  /* Reduced from 420px for better contrast */
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover state will be handled by JS for smoothness */
.bilder-carousel-block.is-paused .bilder-carousel-list {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  .bilder-carousel-block {
    padding: 50px 0;
  }

  .bilder-carousel-item {
    border-radius: 20px;
  }

  .bilder-carousel-item.is-portrait img {
    height: 350px;
  }

  .bilder-carousel-item.is-landscape img,
  .bilder-carousel-item.is-square img {
    height: 250px;
  }

  .bilder-carousel-list {
    gap: 30px;
    padding-right: 30px;
  }
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .main-nav a {
    font-size: 3.5rem;
  }

  .intro-content p {
    font-size: 1.7rem;
  }

  /* Contact Block Tablet/Mobile */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-card-col {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .header .logo img {
    height: 60px;
  }

  .header-right {
    gap: 20px;
  }

  .phone-link span {
    display: none;
  }

  .hero {
    height: auto;
    min-height: 500px;
    padding: 0 15px 20px 15px;
    /* Slightly less space below hero video on mobile */
  }

  .hero-container {
    height: 70vh;
    /* Adjusted from 65vh as requested */
    min-height: 450px;
    border-radius: 30px;
    /* Slightly smoother for mobile */
  }

  .hero-overlay .container {
    padding: 0 20px;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .intro-text {
    padding: 50px 0;
    /* More balanced padding */
    position: relative;
    z-index: 1;
    background-color: #fff;
  }

  .intro-content {
    max-width: 100%;
  }

  .intro-content p {
    font-size: 1.4rem;
  }

  /* Global Mobile Styles */
  .section {
    padding: 50px 0;
  }

  .section-headline {
    font-size: 2.2rem;
    margin-bottom: 20px;
  }

  .section-text {
    font-size: 1rem;
    margin-bottom: 30px;
  }

  /* Assortment Mobile */
  .assortment-grid {
    flex-direction: column;
    gap: 20px;
  }

  .assortment-card {
    flex: none !important;
    width: 100%;
  }

  .assortment-image-wrapper {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
  }

  .assortment-btn {
    opacity: 1;
    transform: none;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    /* Consistent rounded square look on mobile */
  }

  .features-block.has-box,
  .downloads-block.has-box {
    padding: 20px 0;
  }

  .features-block.has-box .features-wrapper,
  .downloads-block.has-box .features-wrapper {
    padding: 50px 25px;
    border-radius: 30px;
  }

  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }

  .feature-title {
    font-size: 1.4rem;
  }

  /* Two-Column List Mobile */
  .two-col-list-block {
    padding: 60px 0;
  }

  .two-col-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .two-col-headline.section-headline {
    font-size: 2.2rem;
  }


  /* Contact Block Mobile Refinements */
  .contact-card {
    padding: 30px;
  }

  .contact-card-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .menu-body {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 20px;
    /* Reduced from 40px */
    padding-bottom: 40px;
    /* Added control */
  }

  .main-nav {
    width: 100%;
    margin-bottom: 30px;
    /* Reduced from 40px */
  }

  .main-nav li {
    margin-bottom: 5px;
    /* Reduced spacing between links */
  }

  .main-nav a {
    font-size: 2.2rem;
    /* Reduced from 2.5rem */
    padding: 5px 10px;
  }

  .menu-info-area {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .menu-contact {
    margin-bottom: 20px;
    /* Reduced from 30px */
    font-size: 1.3rem;
    /* Reduced from 1.4rem */
  }

  .menu-header {
    padding: 20px 0;
    /* Reduced top gap specifically for mobile */
  }

  .footer-nav ul {
    justify-content: flex-start;
    gap: 15px;
  }

}

@media (max-width: 1024px) {

  /* Tablet Layout (Compact Desktop Style) */
  .media-text-container {
    flex-direction: column-reverse !important;
    gap: 40px;
    align-items: flex-start !important;
  }

  /* No need for separate layout-right rule since both are now column-reverse */
  .layout-right .media-text-container {
    flex-direction: column-reverse !important;
  }

  .media-group {
    width: 100%;
    max-width: 600px;
    /* Constrain width for elegance */
    margin: 0;
    /* Left align */
    display: block;
    /* Allow absolute positioning children */
    position: relative;
    height: 400px;
    /* Fixed height to accommodate absolute children */
  }

  .has-overlapping .media-group {
    padding: 0;
    /* Reset padding */
  }

  .has-overlapping .media-item.pos-bg {
    width: 75%;
    max-width: none;
    position: relative;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: 0;
    z-index: 1;
  }

  .has-overlapping .media-item.pos-fg {
    width: 48%;
    max-width: none;
    position: absolute;
    right: 0 !important;
    left: auto !important;
    top: 55% !important;
    transform: translateY(-45%);
    /* Desktop overlap style */
    z-index: 2;
    margin: 0;
  }

  .section-text {
    margin-bottom: 25px;
  }

  .text-group {
    max-width: 100%;
    text-align: left;
    padding: 0;
  }
}

@media (max-width: 768px) {

  /* Mobile Layout (Vertical Stack) - Override Tablet */
  .media-text-container {
    gap: 20px !important;
  }

  .media-group {
    display: flex;
    justify-content: center;
    height: auto;
    /* Reset height */
    width: 100%;
    max-width: 450px;
    /* Constrain width to keep images together */
    margin: 0;
    /* Left align the group */
  }

  .has-overlapping .media-group {
    flex-direction: column;
    align-items: center;
    padding: 40px 0 0 0;
  }

  .has-overlapping .media-item.pos-bg {
    width: 85%;
    max-width: 500px;
    margin-bottom: 0;
  }

  .has-overlapping .media-item.pos-fg {
    width: 60%;
    max-width: 350px;
    position: relative;
    top: auto !important;
    right: auto !important;
    /* align-self handles right positioning in flex column? No, align-self: flex-end */
    align-self: flex-end;
    transform: translateY(-50%);
    margin-bottom: -30%;
  }

  /* Footer Mobile */
  .footer {
    padding-top: 60px;
    text-align: center;
  }

  .footer-grid {
    flex-direction: column;
    gap: 40px;
  }

  .footer-col {
    width: 100%;
  }

  .footer-logo img {
    height: 60px;
  }

  .footer-bottom-flex {
    flex-direction: column;
    gap: 25px;
  }

  .footer-sub-nav ul {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .footer-socials {
    justify-content: center;
  }
}

/* History Slider Block */
.history-block {
  padding: 80px 0;
  text-align: center;
}

@media (max-width: 768px) {
  .history-block {
    padding: 50px 0;
  }
}

.history-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 80px;
}

@media (max-width: 768px) {
  .history-slider-wrapper {
    margin-top: 40px;
  }
}

.history-slider-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-top: 60px;
  margin-top: -60px;
}

.history-slider-track {
  display: flex;
  align-items: flex-start;
  /* Anchor all slides to the top */
  transition: transform 0.6s ease;
  width: 100%;
  gap: 20px;
  /* Add gap between slides */
}

.slider-pagination {
  width: 100%;
  /* Full width to push it to its own row */
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.history-slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
  /* Align to top for consistent Y-position */
  gap: 60px;
  justify-content: center;
  padding: 20px 0;
}

/* Media Side (Left) */
.history-media-wrapper {
  position: relative;
  width: 50%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  /* Force stick to top */
}

.history-year {
  position: absolute;
  top: -35px;
  /* Slightly closer */
  right: -35px;
  /* Slightly closer */
  font-family: var(--font-headline);
  font-size: 5.5rem;
  /* Larger as requested */
  font-weight: 900;
  color: var(--color-green-light);
  z-index: 10;
  line-height: 0.8;
  opacity: 1;
  pointer-events: none;
}

/* Lightbox Refinement */
.basicLightbox {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(8px);
  z-index: 20000;
  /* Extremely high to cover everything */
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.lightbox-content {
  width: 90vw;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.lightbox-content img,
.lightbox-content video,
.lightbox-video-container {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  /* Slight polish */
}

.lightbox-video-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-video-container video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

body.lightbox-open .header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lightbox-close {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  background: none;
  border: none;
  color: #fff;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 20001;
  transition: transform 0.2s ease, opacity 0.2s ease;
  line-height: 1;
}

@media (max-width: 768px) {
  .lightbox-close {
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 40px;
  }
}

.lightbox-close:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

.history-media-link {
  display: block;
  position: relative;
  width: 100%;
  border-radius: 30px;
  overflow: hidden;
  /* aspect-ratio: 4/3; <- Replaced with padding-top hack for better video/image sync */
  height: 0;
  padding-top: 75%;
  /* 4:3 Aspect Ratio */
  cursor: pointer;
  background-color: #000;
}

.history-media-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.6s ease;
  border: none;
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1;
  /* Prevent baseline issues */
}

.history-media-link:hover .history-media-element {
  transform: scale(1.05);
}

.video-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

/* Content Side (Right) */
.history-content {
  width: 50%;
  text-align: left;
  max-width: 500px;
}

.history-slide-headline {
  font-family: var(--font-headline);
  font-size: 2.5rem;
  color: var(--color-green-dark);
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 800;
  line-height: 1.1;
}

.history-text {
  font-family: var(--font-text);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-black);
}

/* Navigation Group — only holds pagination dots now */
.history-slider-nav-group {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* Navigation Arrows */
.slider-arrow {
  width: 45px;
  height: 45px;
  background-color: var(--color-yellow);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  z-index: 20;
  flex-shrink: 0;
  position: absolute;
  /* JS will set the exact top to vertically center on the image */
  top: 50%;
  transform: translateY(-50%);
}

.slider-arrow.prev {
  left: 0;
}

.slider-arrow.next {
  right: 0;
}

/* --- Responsive Breakpoints Logic --- */

/* Laptops & Small Desktops (1200px and below) */
@media (max-width: 1200px) {
  .history-slide {
    gap: 40px;
    padding: 0 40px;
  }

  .history-year {
    font-size: 4.5rem;
    top: -25px;
    right: -25px;
  }
}

/* Tablets Landscape (1024px and below) */
@media (max-width: 1024px) {
  .history-year {
    font-size: 4rem;
    top: -20px;
    right: -10px;
  }

  .history-slider-viewport {
    width: 100%;
  }

  .slider-arrow {
    width: 40px;
    height: 40px;
  }

  .slider-arrow svg {
    width: 20px;
    height: 20px;
  }
}

/* Stacking Point (960px and below - Tablet Portrait) */
@media (max-width: 960px) {
  .history-slide {
    display: flex;
    flex-direction: column !important;
    position: relative;
    padding: 20px 0;
    box-sizing: border-box;
    align-items: flex-start;
    gap: 0;
    /* Gaps handled by margins now */
  }

  .history-media-wrapper,
  .history-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .history-year {
    font-size: 4.5rem;
    /* Increased size */
    top: -25px;
    right: 0px;
  }

  /* Navigation: arrows overlay on the image, centered vertically by JS */
  .slider-arrow {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .slider-arrow.prev {
    left: 12px;
  }

  .slider-arrow.next {
    left: auto;
    right: 12px;
  }

  /* Nav group: only pagination dots, below the slide */
  .history-slider-nav-group {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
  }

  .slider-pagination {
    margin-top: 0;
  }

  .history-media-wrapper {
    margin-bottom: 15px;
  }

  .history-content {
    text-align: left;
    width: 100%;
    padding-top: 0;
  }

  .history-slide-headline {
    font-size: 1.8rem;
    margin-top: 10px;
    margin-bottom: 12px;
  }

  .history-slider-viewport {
    width: 100%;
    margin-top: 0;
    padding-top: 40px;
    overflow: visible !important;
  }

  .history-slider-wrapper {
    margin-top: 10px;
    position: relative;
    padding-bottom: 0;
    display: block;
    overflow: hidden;
  }
}

/* Slider Pagination — Instagram-style rolling dots */
.slider-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -15px;
  overflow: hidden;
  /* 5 dots visible: 5×10px + 4×8px gap = 82px, plus buffer */
  width: 90px;
  height: 24px;
  position: relative;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slider-pagination:active {
  cursor: grabbing;
}

.history-slider-wrapper.is-scrubbing-dots .slider-pagination {
  transform: scale(1.2);
}

.slider-pagination-track {
  display: flex;
  gap: 8px;
  align-items: center;
  transition: transform 0.3s ease;
  position: absolute;
  left: 50%;
  /* Let the parent container handle drag events */
}

.pagination-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
  padding: 0;
  transform-origin: center;
  flex-shrink: 0;
  position: relative;
  /* Base for pseudo-element */
}

/* Larger invisible hitbox */
.pagination-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background: transparent;
}

.pagination-dot.active {
  background-color: var(--color-green-dark);
}

/* Specific Mobile Refinements (768px and below) */
@media (max-width: 768px) {
  .history-year {
    font-size: 4rem;
    top: -20px;
  }

  .slider-arrow.prev {
    left: 10px;
  }

  .slider-arrow.next {
    right: 10px;
  }

  .history-text {
    font-size: 1rem;
  }

  .section-headline {
    font-size: 2.2rem;
  }
}



/* Global Sync for Media behavior */
.history-media-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  background-color: #000;
}

video.history-media-element {
  background-color: #000;
}

/* Ansprechpartner Block */
.ansprechpartner-group {
  border: none;
  padding: 80px 0 0;
  margin: 0 0 60px;
}

.ansprechpartner-group legend.section-subline {
  padding-right: 0;
  text-transform: none;
  font-size: 1.6rem;
  letter-spacing: 0;
  margin-bottom: 0;
}

.ansprechpartner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 50px 40px;
  margin-top: -40px;
}

.person-card {
  display: flex;
  flex-direction: column;
}

.person-photo {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 15px;
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.person-photo-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-white-off, #f4f4f4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
}

.person-photo-placeholder svg {
  width: 50%;
  height: 50%;
  opacity: 0.6;
}


.person-name {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-green-dark);
  margin: 0 0 4px;
  line-height: 1.2;
}

.person-region {
  font-family: var(--font-text);
  font-size: 0.85rem;
  color: var(--color-green-light);
  margin: 0 0 10px;
  line-height: 1.4;
}

.person-location-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.person-location-tag {
  display: inline-block;
  background-color: rgba(39, 97, 64, 0.1);
  color: var(--color-green-dark);
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  line-height: 1.4;
}

.person-company {
  margin: 0 0 4px;
}

.person-contact {
  margin-top: 4px;
}

.person-contact p {
  font-family: var(--font-text);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-black);
  margin: 0;
}

.person-contact .contact-label {
  color: var(--color-black);
}

.person-contact a {
  color: var(--color-black);
  text-decoration: none;
  font-weight: normal;
}

.person-contact a:hover {
  text-decoration: underline;
}

/* Ansprechpartner Mobile */
@media (max-width: 768px) {
  .ansprechpartner-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 15px;
  }

  .person-photo {
    max-width: 100%;
  }

  .ansprechpartner-group {
    margin-bottom: 40px;
    padding-top: 30px;
  }
}

/* ============================================
   Kontaktformular Block
   ============================================ */
.kontaktform-block {
  padding: 60px 0;
}

.kontaktform {
  width: 100%;
  position: relative;
}

.kontaktform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.kontaktform-field {
  margin-bottom: 12px;
}

.kontaktform input[type="text"],
.kontaktform input[type="email"],
.kontaktform textarea {
  width: 100%;
  padding: 18px 22px;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--color-black);
  background-color: #f0f7f2;
  /* Light green from screenshot */
  border: 1px solid transparent;
  border-radius: 12px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.kontaktform input[type="text"]::placeholder,
.kontaktform input[type="email"]::placeholder,
.kontaktform textarea::placeholder {
  color: rgba(0, 0, 0, 0.45);
}

.kontaktform input[type="text"]:focus,
.kontaktform input[type="email"]:focus,
.kontaktform textarea:focus {
  border-color: var(--color-green-dark);
  box-shadow: 0 0 0 3px rgba(39, 97, 64, 0.1);
}

.kontaktform textarea {
  resize: vertical;
  min-height: 140px;
}

.kontaktform-select {
  width: 100%;
  padding: 18px 22px;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--color-black);
  background-color: #f0f7f2;
  border: 1px solid transparent;
  border-radius: 12px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23276140' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 22px center;
  background-size: 20px;
}

.kontaktform-select:focus {
  border-color: var(--color-green-dark);
  box-shadow: 0 0 0 3px rgba(39, 97, 64, 0.1);
}

.kontaktform-privacy {
  margin: 16px 0 20px;
}

.kontaktform-privacy label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-text);
  font-size: 0.85rem;
  color: var(--color-black);
  cursor: pointer;
  line-height: 1.5;
}

.kontaktform-privacy input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--color-green-dark);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.kontaktform-privacy a {
  color: var(--color-green-dark);
  text-decoration: underline;
}

.kontaktform-footer {
  margin-top: 5px;
}

.kontaktform-submit {
  display: inline-block;
  padding: 14px 40px;
  font-family: var(--font-text);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: #ffb800;
  /* Distinct yellow/orange */
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kontaktform-submit:hover {
  background: #e0a800;
  transform: translateY(-1px);
}

.kontaktform-submit:active {
  transform: translateY(0);
}

.kontaktform-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.kontaktform-message {
  margin-top: 16px;
  padding: 0;
  font-family: var(--font-text);
  font-size: 0.9rem;
  line-height: 1.5;
  border-radius: 8px;
  display: none;
}

.kontaktform-message.is-success {
  display: block;
  padding: 14px 18px;
  background: rgba(39, 97, 64, 0.08);
  color: var(--color-green-dark);
  border: 1px solid rgba(39, 97, 64, 0.2);
}

.kontaktform-message.is-error {
  display: block;
  padding: 14px 18px;
  background: rgba(200, 30, 30, 0.06);
  color: #c81e1e;
  border: 1px solid rgba(200, 30, 30, 0.2);
}

@media (max-width: 768px) {
  .kontaktform-row {
    grid-template-columns: 1fr;
  }
}

/* Teaser Section */
.teaser-header {
  margin-bottom: 50px;
  text-align: left;
}

@media (max-width: 768px) {
  .teaser-header {
    margin-bottom: 30px;
  }
}

.teaser-extra-headline {
  color: var(--color-green-dark);
  font-family: var(--font-headline);
  font-size: 2.2rem;
  font-weight: 800;
  margin: 10px 0 0 0;
  line-height: 1.2;
}

.teaser-section .section-intro {
  margin: 20px 0 0 0;
  color: var(--color-black);
  max-width: 800px;
}

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.teaser-card {
  display: flex;
  flex-direction: column;
}

.teaser-image-link {
  text-decoration: none;
  display: block;
}

.teaser-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 30px;
  overflow: hidden;
  margin-bottom: 25px;
  background-color: var(--color-white-off);
}

.teaser-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* .teaser-card:hover .teaser-img {
  transform: scale(1.05);
} */

.teaser-title-link {
  text-decoration: none;
  display: block;
}

.teaser-title-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.teaser-title {
  color: var(--color-brown-dark);
  font-family: var(--font-headline);
  font-size: 1.8rem;
  font-weight: 800;
}

.teaser-arrow {
  width: 32px;
  height: 32px;
  background-color: var(--color-yellow);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-shrink: 0;
}

.teaser-card:hover .teaser-arrow {
  transform: translateX(12px);
}

.teaser-arrow svg {
  width: 20px;
  height: 20px;
}

.teaser-text {
  color: var(--color-black);
  font-size: 1rem;
  line-height: 1.6;
}

.teaser-text p {
  margin: 0;
}

@media (max-width: 1024px) {
  .teaser-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .teaser-grid {
    grid-template-columns: 1fr;
  }
}

/* Download Block Refinements */
.download-item {
  display: flex;
  flex-direction: column;
}

.download-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: var(--color-green);
  border-radius: 20px;
  transition: transform 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
}

.download-icon-btn svg {
  width: 28px;
  height: 28px;
  overflow: visible;
}

.download-icon-btn:hover {
  transform: scale(1.08);
}

.download-arrow {
  transition: transform 0.3s ease;
}

.download-base {
  transition: transform 0.3s ease;
  transform-origin: center;
}

.download-icon-btn:hover .download-arrow {
  transform: translateY(2px);
}

.download-icon-btn:hover .download-base {
  transform: scaleX(1.15);
}

.download-icon-btn.is-disabled {
  background-color: #eee;
  cursor: not-allowed;
  transform: none;
}

.download-icon-btn.is-disabled svg path {
  stroke: #ccc;
}

.download-action {
  margin-top: auto;
  padding-top: 20px;
}

.download-link-btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-green);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.download-link-btn:hover {
  border-color: var(--color-yellow);
  color: var(--color-black);
}

/* Back to overview button */
.container-back {
  padding-top: 40px;
  display: flex;
  justify-content: flex-start;
}

.back-to-overview {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  color: var(--color-green-dark);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.back-arrow {
  width: 32px;
  height: 32px;
  background-color: var(--color-yellow);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.back-arrow svg {
  width: 20px;
  height: 20px;
}

.back-to-overview:hover .back-arrow {
  transform: translateX(-12px);
}

@media (max-width: 768px) {
  .container-back {
    padding-top: 20px;
  }

  .back-to-overview {
    font-size: 1rem;
  }
}

/* Accordion Block */
.accordion-block {
  background-color: #fff;
}

.accordion-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.accordion-item {
  background-color: var(--color-white-off);
  border-radius: 20px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.accordion-item:hover {
  background-color: #f0f2ed;
}

.accordion-item[open] {
  background-color: #f0f4f1;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.accordion-header::-webkit-details-marker {
  display: none;
}

.accordion-title {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-green-dark);
  /* Changed from brown to green */
  line-height: 1.3;
  padding-right: 30px;
}

.accordion-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: var(--color-yellow);
  color: #fff;
  border-radius: 12px;
  position: relative;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.icon-line {
  position: absolute;
  background-color: currentColor;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.icon-line--h {
  width: 18px;
  height: 3px;
}

.icon-line--v {
  width: 3px;
  height: 18px;
}


.accordion-item[open] .icon-line--v {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.accordion-item[open] .accordion-icon {
  background-color: #f7ae00;
  /* Only slightly darker yellow */
}


.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: height;
}

.accordion-item[open] .accordion-content {
  height: auto;
  /* Fallback for no-JS */
}





.accordion-content-inner {
  overflow: hidden;
  padding: 0 30px 20px 30px;
}

.accordion-content-inner.section-text {
  margin-bottom: 0;
  color: var(--color-black);
  max-width: 800px;
  font-size: 1.1rem;
}

.accordion-content-inner.section-text>*:last-child {
  margin-bottom: 0;
}

.accordion-content-inner.section-text a {
  display: inline-block;
  background-color: var(--color-yellow);
  color: #fff;
  padding: 6px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  transition: all 0.3s ease;
  margin-top: 5px;
  margin-bottom: 5px;
}

.accordion-content-inner.section-text a:hover {
  transform: translateY(-2px);
  opacity: 0.9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: #fff;
}



@media (max-width: 768px) {
  .accordion-title {
    font-size: 1.15rem;
  }


  .accordion-header {
    padding: 20px;
  }

  .accordion-content {
    padding: 0;
  }

  .accordion-content-inner {
    padding: 0 20px 15px 20px;
  }



  .accordion-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .accordion-icon .icon-line--h {
    width: 14px;
    height: 2px;
  }

  .accordion-icon .icon-line--v {
    width: 2px;
    height: 14px;
  }
}

/* ============================================ */
/* 404 Error – Wilted Plant Revival             */
/* ============================================ */

/* --- Cursor: hide native, show custom can --- */
.error-page-wrapper:not(.is-bloomed),
.error-page-wrapper:not(.is-bloomed) * {
  cursor: none !important;
}

.can-cursor {
  position: fixed;
  top: -200px;
  left: -200px;
  margin: -96px 0 0 -120px !important;
  /* Centered for 240x192 size */
  width: 240px !important;
  height: 192px !important;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* On Desktop: Show only on hover */
@media (pointer: fine) {
  .error-page-wrapper:not(.is-bloomed):hover .can-cursor {
    opacity: 1;
    visibility: visible;
  }
}

/* Show can ONLY on mobile initially at the start position */
@media (max-width: 768px) {
  .can-cursor:not(.has-moved) {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* PNG image: mirror so spout points LEFT (original PNG has spout on right) */
.can-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleX(-1);
  display: block;
}

.can-cursor svg {
  width: 100%;
  height: 100%;
  transform-origin: center center;
}

/* Tilt counter-clockwise: left-pointing spout tips downward when pouring */
.can-cursor.is-pouring {
  transform: rotate(-45deg) translate(-25px, 35px);
}

/* Water drops (HTML spans) - updated positions for 240px can */
.cdrop {
  position: absolute;
  top: 54px;
  left: 30px;
  /* Positioned near mirrored spout tip */
  width: 10px;
  height: 13px;
  border-radius: 50% 50% 60% 60%;
  background: #60c8d8;
  opacity: 0;
  pointer-events: none;
}

.cdrop-2 {
  top: 60px;
  left: 45px;
  width: 8px;
  height: 11px;
  background: #93d8e8;
}

.cdrop-3 {
  top: 48px;
  left: 18px;
  width: 9px;
  height: 12px;
  background: #60c8d8;
}

.cdrop-4 {
  top: 57px;
  left: 38px;
  width: 8px;
  height: 10px;
  background: #93d8e8;
}

.cdrop-5 {
  top: 45px;
  left: 28px;
  width: 9px;
  height: 12px;
  background: #60c8d8;
}

.cdrop-6 {
  top: 65px;
  left: 32px;
  width: 7px;
  height: 10px;
  background: #93d8e8;
}

.can-cursor.is-pouring .cdrop {
  opacity: 1;
  transition: opacity 0.2s;
}



@keyframes cdrop-fall {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    transform: translate(-18px, 90px) scale(0.6);
    opacity: 0;
  }
}

.can-cursor.is-pouring .cdrop-1 {
  animation: cdrop-fall 0.6s linear 0s infinite;
}

.can-cursor.is-pouring .cdrop-2 {
  animation: cdrop-fall 0.6s linear 0.12s infinite;
}

.can-cursor.is-pouring .cdrop-3 {
  animation: cdrop-fall 0.6s linear 0.24s infinite;
}

.can-cursor.is-pouring .cdrop-4 {
  animation: cdrop-fall 0.6s linear 0.36s infinite;
}

.can-cursor.is-pouring .cdrop-5 {
  animation: cdrop-fall 0.6s linear 0.48s infinite;
}

.can-cursor.is-pouring .cdrop-6 {
  animation: cdrop-fall 0.6s linear 0.18s infinite;
}

/* Restore can-hidden state after blooming */

.error-page-wrapper.is-bloomed .can-cursor {
  display: none !important;
}

/* --- Page layout --- */
.error-page-wrapper {
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Move content up */
  align-items: center;
  padding: 20px 20px 60px;
  /* Minimal top/bottom padding for maximum compactness */
  background: #fff;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  /* Allow scrolling if content is too tall */
}

.error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 4vh, 24px);
  /* Vertical space scales with height */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.error-number {
  font-family: var(--font-headline);
  font-size: clamp(80px, 15vw, 180px);
  font-weight: 900;
  color: var(--color-green-dark);
  line-height: 1;
  opacity: 0.15;
  letter-spacing: -2px;
  margin-bottom: 0;
  /* Removed negative margin to prevent overlap with plant */
  pointer-events: none;
  user-select: none;
}

/* --- Plant wrapper --- */
.plant-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
}

.plant-svg {
  width: 270px;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.08));
}

.water-trigger {
  position: absolute;
  inset: 0;
}

/* --- Wilted / Bloomed state swap --- */
.state-wilted {
  opacity: 1;
  transition: opacity 0.7s ease;
}

.state-bloomed {
  opacity: 0;
}

.plant-wrapper.is-watered .state-wilted {
  opacity: 0;
}

.plant-wrapper.is-watered .state-bloomed {
  opacity: 1;
}

/* Make group visible; children animate in via their own rules */

/* --- BLOOMED ELEMENT ANIMATIONS (triggered by .is-watered on parent) --- */
/* Each element is hidden until .is-watered, then animates with a delay */

/* 1. Stem – draws itself upward via stroke-dashoffset */
.b-stem {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
}

.plant-wrapper.is-watered .b-stem {
  animation: draw-path 0.9s ease-out 0.05s forwards;
}

/* 2a. Left branch */
.b-branch-l {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}

.plant-wrapper.is-watered .b-branch-l {
  animation: draw-path 0.5s ease-out 0.6s forwards;
}

/* 2b. Right branch */
.b-branch-r {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}

.plant-wrapper.is-watered .b-branch-r {
  animation: draw-path 0.5s ease-out 0.75s forwards;
}

/* 2c. Mid branch */
.b-branch-m {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}

.plant-wrapper.is-watered .b-branch-m {
  animation: draw-path 0.45s ease-out 0.9s forwards;
}

@keyframes draw-path {
  to {
    stroke-dashoffset: 0;
  }
}

/* 3. Leaves – scale in from their connection points */
.b-leaf-l {
  transform-box: view-box;
  transform-origin: 46px 136px;
  opacity: 0;
  transform: scale(0);
}

.b-leaf-r {
  transform-box: view-box;
  transform-origin: 154px 108px;
  opacity: 0;
  transform: scale(0);
}

.b-leaf-m {
  transform-box: view-box;
  transform-origin: 44px 167px;
  opacity: 0;
  transform: scale(0);
}

.b-leaf-s {
  transform-box: view-box;
  transform-origin: 100px 112px;
  opacity: 0;
  transform: scale(0);
}

.plant-wrapper.is-watered .b-leaf-l {
  animation: leaf-unfurl 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s forwards;
}

.plant-wrapper.is-watered .b-leaf-r {
  animation: leaf-unfurl 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s forwards;
}

.plant-wrapper.is-watered .b-leaf-m {
  animation: leaf-unfurl 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s forwards;
}

.plant-wrapper.is-watered .b-leaf-s {
  animation: leaf-unfurl 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.45s forwards;
}

@keyframes leaf-unfurl {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-15deg);
  }

  60% {
    opacity: 1;
    transform: scale(1.1) rotate(3deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* 4. Main flower – blooms from specfic tip point (100, 40) */
.b-flower-main {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 100px 40px;
}

.plant-wrapper.is-watered .b-flower-main {
  animation: flower-bloom 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.55s forwards;
}

/* 5. Side flower – blooms from specific tip point (44, 134) */
.b-flower-side {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 44px 134px;
}

.plant-wrapper.is-watered .b-flower-side {
  animation: flower-bloom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards;
}

@keyframes flower-bloom {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-60deg);
  }

  55% {
    opacity: 1;
    transform: scale(1.15) rotate(8deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Water drops on plant SVG */
.water-drops-svg {
  opacity: 0;
  pointer-events: none;
}

.plant-wrapper.is-watering .water-drops-svg {
  opacity: 1;
}

@keyframes sdrop-fall {
  0% {
    transform: translateY(-15px);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translateY(55px);
    opacity: 0;
  }
}

.plant-wrapper.is-watering .sdrop-1 {
  animation: sdrop-fall 0.6s ease-in 0s infinite;
}

.plant-wrapper.is-watering .sdrop-2 {
  animation: sdrop-fall 0.6s ease-in 0.1s infinite;
}

.plant-wrapper.is-watering .sdrop-3 {
  animation: sdrop-fall 0.6s ease-in 0.2s infinite;
}

.plant-wrapper.is-watering .sdrop-4 {
  animation: sdrop-fall 0.6s ease-in 0.3s infinite;
}

.plant-wrapper.is-watering .sdrop-5 {
  animation: sdrop-fall 0.6s ease-in 0.4s infinite;
}

/* --- Messages --- */
.error-messages {
  position: relative;
  max-width: 560px;
  width: 100%;
  min-height: auto;
  /* Let it collapse on mobile */
  margin-top: 10px;
}

.message {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.message--sad {
  opacity: 1;
  transform: translateY(0);
}

.message--happy {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.message--sad h1,
.message--happy h1 {
  font-family: var(--font-headline);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--color-green-dark);
  margin-bottom: 12px;
}

.message--sad p,
.message--happy p {
  color: var(--color-black);
  font-size: 1.05rem;
  line-height: 1.6;
}

.message--sad p em {
  color: #3DBCAD;
  font-style: italic;
  font-weight: 600;
}

.message--happy p {
  margin-bottom: 24px;
}

.error-content.is-bloomed .message--sad {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-14px);
}

.error-content.is-bloomed .message--happy {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

@media (max-width: 768px) {
  .error-page-wrapper {
    min-height: calc(100vh - 80px);
    padding: 20px 15px 40px;
    justify-content: flex-start;
  }



  .plant-svg {
    width: 200px;
  }

  .error-number {
    font-size: clamp(70px, 20vw, 110px);
    margin-bottom: 0;
  }

  .error-content {
    gap: 0px;
    /* Tighter on mobile */
  }

  .plant-svg {
    max-height: 40vh;
    /* Prevent plant from taking up too much vertical space */
  }

  .can-cursor {
    width: 160px !important;
    height: 128px !important;
    margin: -80px 0 0 -130px !important;
    /* Move it slightly away from finger */
  }

  .message--sad h1,
  .message--happy h1 {
    font-size: 1.2rem;
    margin-bottom: 8px;
  }

  .message--sad p,
  .message--happy p {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .error-messages {
    min-height: auto;
    width: 90%;
  }

  /* Ensure button is visible */
  .btn-primary {
    margin-top: 5px;
  }
}

/* Adjust for very small screens */
@media (max-width: 480px) {
  .error-content {
    gap: 8px;
  }

  .plant-svg {
    width: 150px;
  }
}

/* Specific touch handling: ensure cursor doesn't block view */
@media (pointer: coarse) {
  .can-cursor {
    pointer-events: none;
    z-index: 10000;
    /* Show it initially and position for touch */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: fixed;
    /* Move the can slightly more up/left on touch so it's visible next to the finger */
    margin: -110px 0 0 -130px !important;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .error-page-wrapper:not(.is-bloomed) {
    cursor: auto !important;
  }
}


/* --- End 404 styles --- */