@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:wght@400;500;600&display=swap');

html,
body,
.site,
.site-content,
#main,
main,
article,
.entry,
.entry-content,
.post,
.page,
.page-content {
  background: #1f1b19 !important;
  background-color: #1f1b19 !important;
}

body,
p,
li,
.entry-content p,
.page-content p,
.post-content p,
.entry-content li,
.page-content li,
.post-content li {
  color: #f2e7d7 !important;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: 1.42rem !important;
  line-height: 1.85 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title {
  color: #e6cfa3 !important;
  text-align: center !important;
}

h1,
.entry-title {
  font-family: "Cinzel Decorative", serif !important;
  font-size: 4.3rem !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: 1px !important;
  margin-top: 10px !important;
  margin-bottom: 26px !important;
  text-transform: uppercase !important;
  background: none !important;
}

h2,
.entry-content h2,
.page-content h2,
.post-content h2,
.home .entry-content h2 {
  font-family: "Cinzel", serif !important;
  font-size: 2.15rem !important;
  font-weight: 400 !important;
  line-height: 1.28 !important;
  letter-spacing: 1px !important;
  margin-top: 18px !important;
  margin-bottom: 22px !important;
}

h3,
.entry-content h3,
.page-content h3,
.post-content h3 {
  font-family: "Cinzel", serif !important;
  font-size: 1.9rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 1px !important;
  margin-top: 34px !important;
  margin-bottom: 14px !important;
}

h4,
.entry-content h4,
.page-content h4,
.post-content h4 {
  font-family: "Cinzel", serif !important;
  font-size: 1.55rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 1.2px !important;
  margin-top: 26px !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
}

h5,
.entry-content h5,
.page-content h5,
.post-content h5 {
  font-family: "Cinzel", serif !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 2.2px !important;
  margin-top: 20px !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
}

.entry-content,
.page-content,
.post-content,
.home .entry-content {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.entry-content p,
.page-content p,
.post-content p,
.home .entry-content p {
  max-width: 780px !important;
  margin: 0 auto 18px auto !important;
}

.home .entry-content h2 + p {
  max-width: 920px !important;
  margin: 26px auto 44px auto !important;
  text-align: center !important;
  font-size: 1.65rem !important;
  line-height: 1.6 !important;
  font-style: italic !important;
  color: #e6cfa3 !important;
}

.home .entry-content h3,
.home .entry-content h3 + p {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.main-navigation a,
.menu a,
#menu-primary a,
.nav-menu a {
  color: #e6cfa3 !important;
  font-size: 0.95rem !important;
  letter-spacing: 1px !important;
  line-height: 1.3 !important;
}

.main-navigation a:hover,
.menu a:hover,
#menu-primary a:hover,
.nav-menu a:hover {
  color: #f2e7d7 !important;
}

.site-footer .site-title {
  display: none !important;
}

.entry-content img {
  display: block !important;
  width: 260px !important;
  height: 260px !important;
  margin: 0 auto 20px auto !important;
  object-fit: contain !important;
  background-color: #1f1b19 !important;
}

.page-id-123 .entry-content p,
.page-id-123 .entry-content li,
.page-id-123 .entry-content ul {
  text-align: center !important;
  list-style-position: inside !important;
}

hr {
  width: 82% !important;
  max-width: 980px !important;
  margin: 38px auto !important;
  border: none !important;
  border-top: 2px solid #e6cfa3 !important;
  opacity: 0.8 !important;
}

.wp-block-separator {
  position: relative;
  overflow: visible !important;
  width: 70% !important;
  max-width: 520px !important;
  height: 1px !important;
  margin: 42px auto !important;
  border: none !important;
  background: linear-gradient(
    to right,
    rgba(230, 207, 163, 0),
    rgba(230, 207, 163, 0.95),
    rgba(255, 244, 220, 1),
    rgba(230, 207, 163, 0.95),
    rgba(230, 207, 163, 0)
  ) !important;
}

.wp-block-separator::after {
  content: "✦  ✧  ✦";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  padding: 0 16px;
  background: #1f1b19;
  color: #e6cfa3;
  font-size: 1rem;
  letter-spacing: 8px;
}

.zauber-trenner {
  display: block !important;
  width: 100% !important;
  margin: 34px auto 38px auto !important;
  text-align: center !important;
  color: #e6cfa3 !important;
  font-size: 1.1rem !important;
  letter-spacing: 14px !important;
  opacity: 0.98;
  animation: glitzerTrenner 2.6s ease-in-out infinite alternate;
}

@keyframes glitzerTrenner {
  0% {
    opacity: 0.88;
    transform: scale(1);
    text-shadow:
      0 0 4px rgba(230, 207, 163, 0.25),
      0 0 8px rgba(230, 207, 163, 0.12);
  }

  100% {
    opacity: 1;
    transform: scale(1.03);
    text-shadow:
      0 0 8px rgba(255, 236, 190, 0.8),
      0 0 18px rgba(255, 236, 190, 0.4),
      0 0 28px rgba(255, 236, 190, 0.22);
  }
}

.zauber-kachel,
.wp-block-group.zauber-kachel {
  text-align: center !important;
  cursor: pointer;
  transform-origin: center center;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    filter 0.35s ease !important;
}

.zauber-kachel:hover,
.wp-block-group.zauber-kachel:hover {
  transform: translateY(-8px) scale(1.04) !important;
  filter: drop-shadow(0 12px 24px rgba(212, 178, 120, 0.18)) !important;
}

.zauber-kachel img,
.wp-block-group.zauber-kachel img {
  transition: transform 0.35s ease, filter 0.35s ease !important;
}

.zauber-kachel:hover img,
.wp-block-group.zauber-kachel:hover img {
  transform: scale(1.05) !important;
}

.zauber-kachel h2,
.zauber-kachel h3,
.zauber-kachel p,
.wp-block-group.zauber-kachel h2,
.wp-block-group.zauber-kachel h3,
.wp-block-group.zauber-kachel p {
  transition: color 0.35s ease !important;
}

.zauber-kachel:hover h2,
.zauber-kachel:hover h3,
.zauber-kachel:hover p,
.wp-block-group.zauber-kachel:hover h2,
.wp-block-group.zauber-kachel:hover h3,
.wp-block-group.zauber-kachel:hover p {
  color: #f0d3a2 !important;
}

.zauber-kachel a,
.wp-block-group.zauber-kachel a {
  display: block;
  text-decoration: none !important;
}

.zurueck-button-wrap {
  margin-top: 40px;
  margin-bottom: 10px;
  text-align: center;
}

.zurueck-button {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid #d8b37a;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #f0d3a2 !important;
  font-family: "Cinzel", serif !important;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.zurueck-button:hover {
  background: rgba(216, 179, 122, 0.12);
  color: #fff0d6 !important;
  transform: translateY(-2px);
}

.untertitel-glitzer {
  position: relative;
  overflow: hidden;
  animation: untertitelEinflug 2s ease-out both !important;
}

.untertitel-glitzer::before {
  content: "✦ ✧ ✦ ✧ ✦";
  position: absolute;
  top: -8px;
  right: -140px;
  font-size: 1rem;
  letter-spacing: 12px;
  color: rgba(230, 207, 163, 0.95);
  opacity: 0;
  pointer-events: none;
  animation: glitzerflug1 3.2s ease-out 0.6s 1 forwards !important;
}

.untertitel-glitzer::after {
  content: "✧ ✦ ✧ ✦";
  position: absolute;
  top: 55%;
  right: -100px;
  font-size: 0.9rem;
  letter-spacing: 10px;
  color: rgba(255, 239, 210, 0.9);
  opacity: 0;
  pointer-events: none;
  animation: glitzerflug2 3.6s ease-out 1.1s 1 forwards !important;
}

@keyframes untertitelEinflug {
  0% {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(5px);
  }

  60% {
    opacity: 1;
    transform: translateY(-3px);
    filter: blur(1px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes glitzerflug1 {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-10deg);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-520px, 95px) rotate(-14deg);
  }
}

@keyframes glitzerflug2 {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-6deg);
  }

  20% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: translate(-430px, 55px) rotate(-10deg);
  }
}

@media screen and (max-width: 900px) {
  h1,
  .entry-title {
    font-size: 3.2rem !important;
  }

  h2,
  .entry-content h2,
  .page-content h2,
  .post-content h2,
  .home .entry-content h2 {
    font-size: 1.8rem !important;
  }

  h3,
  .entry-content h3,
  .page-content h3,
  .post-content h3 {
    font-size: 1.65rem !important;
  }

  h4,
  .entry-content h4,
  .page-content h4,
  .post-content h4 {
    font-size: 1.35rem !important;
  }

  .entry-content,
  .page-content,
  .post-content,
  .home .entry-content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .entry-content p,
  .page-content p,
  .post-content p,
  .home .entry-content p {
    max-width: 100% !important;
  }
}

@media screen and (max-width: 600px) {
  h1,
  .entry-title {
    font-size: 2.5rem !important;
  }

  h2,
  .entry-content h2,
  .page-content h2,
  .post-content h2,
  .home .entry-content h2 {
    font-size: 1.5rem !important;
  }

  h3,
  .entry-content h3,
  .page-content h3,
  .post-content h3 {
    font-size: 1.4rem !important;
  }

  h4,
  .entry-content h4,
  .page-content h4,
  .post-content h4 {
    font-size: 1.2rem !important;
  }

  h5,
  .entry-content h5,
  .page-content h5,
  .post-content h5 {
    font-size: 0.95rem !important;
  }

  body,
  p,
  li,
  .entry-content p,
  .page-content p,
  .post-content p {
    font-size: 1.22rem !important;
    line-height: 1.75 !important;
  }

  .entry-content,
  .page-content,
  .post-content,
  .home .entry-content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .entry-content img {
    width: 220px !important;
    height: 220px !important;
  }

  hr,
  .wp-block-separator {
    width: 90% !important;
  }
}

/* =========================
   INDIVIDUELLE ORTE-TRENNER
========================= */

.wp-block-separator.trenner-bett,
.wp-block-separator.trenner-sessel,
.wp-block-separator.trenner-garten,
.wp-block-separator.trenner-kaffee {
  position: relative !important;
  overflow: visible !important;
  width: 52% !important;
  max-width: 420px !important;
  height: 1px !important;
  margin: 26px auto 46px auto !important;
  border: none !important;
  background: linear-gradient(
    to right,
    rgba(230, 207, 163, 0),
    rgba(230, 207, 163, 0.9),
    rgba(255, 244, 220, 1),
    rgba(230, 207, 163, 0.9),
    rgba(230, 207, 163, 0)
  ) !important;
}

.wp-block-separator.trenner-bett::after,
.wp-block-separator.trenner-sessel::after,
.wp-block-separator.trenner-garten::after,
.wp-block-separator.trenner-kaffee::after {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  padding: 0 16px;
  background: #1f1b19;
  color: #e6cfa3;
  font-size: 1rem;
  letter-spacing: 8px;
  text-shadow:
    0 0 6px rgba(255, 236, 190, 0.35),
    0 0 14px rgba(255, 236, 190, 0.18);
}

/* Bett */
.wp-block-separator.trenner-bett::after {
  content: "☾  z z z  ☾";
  animation: trennerBett 3.2s ease-in-out infinite alternate;
}

/* Ohrensessel */
.wp-block-separator.trenner-sessel::after {
  content: "✦  📚  ✦";
  animation: trennerSessel 3s ease-in-out infinite alternate;
}

/* Garten */
.wp-block-separator.trenner-garten::after {
  content: "❀  🐸  ❀";
  animation: trennerGarten 2.8s ease-in-out infinite alternate;
}

/* Kaffee */
.wp-block-separator.trenner-kaffee::after {
  content: "☕  ✦  ☕";
  animation: trennerKaffee 2.6s ease-in-out infinite alternate;
}

@keyframes trennerBett {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -52%) scale(1) translateY(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -52%) scale(1.04) translateY(-3px);
  }
}

@keyframes trennerSessel {
  0% {
    opacity: 0.82;
    transform: translate(-50%, -52%) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -52%) scale(1.05);
  }
}

@keyframes trennerGarten {
  0% {
    opacity: 0.82;
    transform: translate(-50%, -52%) scale(1) translateY(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -52%) scale(1.04) translateY(-2px);
  }
}

@keyframes trennerKaffee {
  0% {
    opacity: 0.82;
    transform: translate(-50%, -52%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -52%) scale(1.03) rotate(1deg);
  }
}

.zauberspruch-trenner {
  text-align: center !important;
  margin: 24px auto 32px auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  position: relative !important;
  line-height: 1 !important;
  animation: zauberspruchLauf 18s linear infinite !important;
}

.zauberfund-untertitel {
  text-align: center !important;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: 1.15rem !important;
  line-height: 1.4 !important;
  font-style: italic !important;
  letter-spacing: 0.03em !important;
  color: rgba(230, 207, 163, 0.92) !important;
  margin-top: 6px !important;
  margin-bottom: 22px !important;
  text-shadow: 0 0 6px rgba(255, 236, 190, 0.08);
}

@media screen and (max-width: 600px) {
  .zauberfund-untertitel {
    font-size: 1rem !important;
    margin-bottom: 18px !important;
  }
}

.zauberfund-bild {
  animation: zauberfundSchweben 4.8s ease-in-out infinite;
  transition:
    transform 0.35s ease,
    filter 0.35s ease,
    opacity 0.35s ease !important;
  transform-origin: center center;
}

.zauberfund-bild:hover {
  transform: translateY(-10px) scale(1.04) !important;
  filter: drop-shadow(0 14px 26px rgba(230, 207, 163, 0.22)) !important;
}

@keyframes zauberfundSchweben {
  0% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0 rgba(230, 207, 163, 0));
  }

  50% {
    transform: translateY(-7px);
    filter: drop-shadow(0 8px 18px rgba(230, 207, 163, 0.12));
  }

  100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0 rgba(230, 207, 163, 0));
  }
}