:root {
  --gold: #d4af37;
  --gold-soft: #f2d98a;
  --black: #0b0b0c;
  --text: #f5f1e8;
  --muted: #bfb6a5;
}

* {
  box-sizing: border-box;
}
/* playfair-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/playfair-display-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/playfair-display-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/playfair-display-v40-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/playfair-display-v40-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/playfair-display-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/playfair-display-v40-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/playfair-display-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/playfair-display-v40-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



body {
  margin: 0;
  background: radial-gradient(circle at 30% 20%, #1a1410, #000000 70%);
  color: var(--text);
  font-family: "Inter", sans-serif;
}
.hero,
.card,
.center {
  animation: pageFadeIn 1.4s ease-out both;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.hero {
  position: relative;
  min-height: 100vh;
  ovvverflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* leichter Glow */
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at center, rgba(212,175,55,0.08), transparent 60%);
  z-index: 1;
}

/* FLACONS */

.flacon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.85;
  z-index: 2;
}

.flacon img {
  width: 360px;
  filllter: drop-shadow(0 40px 60px rgba(0,0,0,0.7));
}

.flacon.left {
  left: 8%;
  trrransform: translateY(-50%) rotate(-6deg);
}

.flacon.right {
  right: 8%;
  trrransform: translateY(-50%) rotate(6deg);
}

/* CENTER CONTENT */

.center {
  text-align: center;
  z-index: 3;
  max-width: 700px;
  padding: 20px;
}

/* Hauptmarke */
h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  margin: 0;
  letter-spacing: 0.05em;

  background: linear-gradient(
    110deg,
    #b78a2b 0%,
    #f7df9e 25%,
    #fff6d6 45%,
    #d4af37 60%,
    #8d6b22 100%
  );

  background-size: 220% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;

  animation: goldShimmer 4.5s ease-in-out infinite;
  text-shadow: 0 0 28px rgba(212, 175, 55, 0.22);
}
@keyframes goldShimmer {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}

/* Untertitel */
h2 {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: var(--gold);
  margin-top: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Goldene Linie */
.divider {
  width: 120px;
  height: 1px;
  margin: 30px auto;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

/* Claim */
.claim {
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.15em;
}

/* Kontakt */
.contact {
  margin-top: 35px;
  font-size: 0.9rem;
  color: var(--gold-soft);
}

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

.contact a:hover {
  color: white;
}

/* Links */
.links {
  margin-top: 40px;
}

.links a {
  margin: 0 10px;
  padding: 10px 18px;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s ease;
}

.links a:hover {
  border-color: var(--gold);
  background: rgba(212,175,55,0.08);
}

/* MOBILE */
@media (max-width: 900px) {
  .flacon {
    display: none;
  }
/* Gemeinsames Icon-Design */
.icon {
  font-size: 0.9rem;
  color: var(--gold);
}

/* Mail-Zeile */
.footer-line.mail {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--gold-soft);
}

/* Link-Styling edel */
.footer-line.mail a {
  color: var(--gold-soft);
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Hover-Effekt */
.footer-line.mail a:hover {
  color: white;
  letter-spacing: 0.05em;
}
.flacon.left {
  animation: flaconLeftIn 1.8s ease-out both;
}

.flacon.right {
  animation: flaconRightIn 1.8s ease-out both;
}

@keyframes flaconLeftIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-50px) rotate(-10deg);
  }
  to {
    opacity: 0.85;
    transform: translateY(-50%) rotate(-6deg);
  }
}

@keyframes flaconRightIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(50px) rotate(10deg);
  }
  to {
    opacity: 0.85;
    transform: translateY(-50%) rotate(6deg);
  }
}
/* Footer zentral und elegant */

.footer-info {
  margin-top: 40px;
  text-align: center;
}

/* Alle Zeilen gleich behandelt */
.footer-line {
  margin: 8px 0;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--muted);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* Icons im gleichen Stil */
.icon {
  color: var(--gold);
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Mail-Link elegant */
.footer-line a {
  color: var(--gold-soft);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-line a:hover {
  color: white;
  letter-spacing: 0.05em;
}
/* Footer Bild (zentral unten) */

.footer-image {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  opacity: 0.9;
}

/* Bild selbst */
.footer-image img {
  width: 100px!important;
  max-width: 60%;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.8));
  transition: all 0.6s ease;
}

/* leichter Luxus-Hover */
.footer-image img:hover {
  transform: translateY(-5px) scale(1.03);
  filter: drop-shadow(0 40px 70px rgba(0,0,0,0.9));
}
/* Impressum / Datenschutz Content */

.legal-text {
  margin-top: 30px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.legal-text p {
  margin: 18px 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

/* leichte Hervorhebung */
.legal-text strong {
  color: var(--gold-soft);
  font-weight: 500;
}
}