:root {
  --honey:       #D4860A;
  --honey-light: #F5C842;
  --honey-dark:  #8B5A00;
  --cream:       #FDF6E3;
  --bark:        #3D2B1F;
  --bark-light:  #6B4226;
  --wax:         #F2E0A0;
  --shadow:      rgba(61,43,31,0.18);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--bark);
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

body::after {
  content: '';
  position: fixed;
  bottom: -8vh;                         /* ← nach unten verschieben gegen iOS Safari Abschneiden */
  left: 0;
  right: 0;
  height: 30vh;                        /* ← Höhe anpassen */
  background-image: url('../assets/flowers_grey.png');
  background-size: auto 100%;          /* ← Höhe füllt Box, Breite proportional */
  background-position: center bottom;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;                       /* ← Transparenz anpassen (0 = unsichtbar, 1 = voll) */
  mix-blend-mode: multiply;
}

#flower-overlay {
  position: fixed;
  bottom: -3vh;                         /* ← gleicher Versatz wie body::after */
  left: 0;
  right: 0;
  height: 40vh;                        /* ← gleiche Höhe wie body::after */
  pointer-events: none;
  z-index: 0;
  /* Standardfarbe Hauptseite: warm gelb */
  background: linear-gradient(to top, rgba(245, 200, 66, 0.45) 0%, transparent 100%);
}


#staging-badge {
  position: fixed;
  top: 3rem;
  right: 1rem;
  z-index: 1000;
  font-family: 'Crimson Pro', monospace;
  font-size: 0.65rem;
  color: var(--bark-light);
  opacity: 0.5;
  pointer-events: none;
  white-space: nowrap;
}

#staging-badge:empty { display: none; }

#lang-switcher {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  gap: 0.25rem;
  background: rgba(253,246,227,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212,134,10,0.2);
  border-radius: 2em;
  padding: 0.25rem;
}

#lang-switcher button,
#lang-switcher a {
  background: none;
  border: none;
  font-family: 'Crimson Pro', serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bark-light);
  padding: 0.25em 0.6em;
  border-radius: 2em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  text-decoration: none;
}

#lang-switcher button:hover,
#lang-switcher a:hover {
  color: var(--bark);
}

#lang-switcher button.active,
#lang-switcher a.active {
  background: var(--honey);
  color: white;
}

#instagram-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1rem;
  z-index: 100;
  width: 4.2rem;
  height: 4.2rem;
  color: var(--bark-light);
  background: rgba(253,246,227,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212,134,10,0.2);
  border-radius: 50%;
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#instagram-btn:hover {
  opacity: 1;
  color: var(--honey);
  border-color: var(--honey);
}

#instagram-btn svg {
  width: 55%;
  height: 55%;
}

.divider {
  text-align: center;
  padding: 1.5rem 0;
  color: var(--honey);
  font-size: 1.5rem;
  letter-spacing: 0.5em;
  opacity: 0.5;
}

footer {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--bark-light);
  font-size: 0.85rem;
}

footer a { color: var(--honey); text-decoration: none; }