/* Schriftarten */

@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;
}

/* Fließtext */

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;
}

/* Überschriften allgemein */

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

/* H1 */

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 */

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 */

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 */

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 */

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;
}

/* Inhaltsbreite */

.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;
}

/* Absätze */

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

/* Startseite Leitsatz */

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

/* Startseite H3 + Text */

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

/* Separatoren */

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

/* Footer-Titel weg */

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

/* Bilder */

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

/* Datenschutzseite */

.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;
}

/* Menü */

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

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

/* Zauber-Kacheln */

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

.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 {
  text-decoration: none !important;
  display: block;
}

/* Zurück-Button Styling */

.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;
  color: #f0d3a2 !important;
  text-decoration: none !important;
  font-family: "Cinzel", serif !important;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.3s ease;
}

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

/* Tablet */

@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;
  }
}

/* Handy */

@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;
  }
}

.wp-block-separator {
  border: none !important;
  height: 1px !important;
  width: 70% !important;
  max-width: 520px !important;
  margin: 42px auto !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;
  position: relative;
  overflow: visible !important;
}

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

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

@keyframes glitzerTrenner {
  0% {
    text-shadow:
      0 0 4px rgba(230, 207, 163, 0.25),
      0 0 8px rgba(230, 207, 163, 0.12);
    transform: scale(1);
    opacity: 0.88;
  }
  100% {
    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);
    transform: scale(1.03);
    opacity: 1;
  }
}

.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);
  }
}