@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

/* =========================
   GLOBAL BACKGROUND
========================= */

html{
min-height:100%;
background-image:url("/wp-content/themes/celestial%2020%20neu/assets/bg-default.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}

body{
margin:0;
font-family:'Quicksand',sans-serif;
background:none;
}

/* Specials Seite Hintergrund */

.page-id-64 html{
background-image:url("/wp-content/themes/celestial%2020%20neu/assets/bg-specials-spring.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}
/* =========================
   LOGO
========================= */
.custom-logo-link, .logo-wrap { display:block; text-align:center; margin:32px 0 8px; }
.custom-logo, .logo-wrap img { max-height:120px; width:auto; }

/* =========================
   DESKTOP NAV
========================= */
/* Dropdown über Glas-Ebenen legen */
.site-header {
    position: relative;
    z-index: 1000;
}

.site-nav {
    position: relative;
    z-index: 1100;
}

.primary-menu .sub-menu {
    position: absolute;
    z-index: 1200;
}
@media (min-width: 769px) {
    .primary-menu li:hover > .sub-menu {
        display: block;
    }
}
/* Erlaubt Dropdowns über Glasflächen */
.site-header,
.site-header * {
    overflow: visible;
}

.site-nav{ margin-top:20px; }
.primary-menu{ list-style:none; display:flex; justify-content:center; gap:40px; padding:0; margin:0; }
.primary-menu>li{ position:relative; }
.primary-menu a{ text-decoration:none; font-size:18px; color:#000; }

/* Dropdown */
.primary-menu .sub-menu{
  position:absolute; top:100%; left:0;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-radius:12px; padding:15px 20px; list-style:none; display:none; min-width:200px;
  box-shadow:0 15px 40px rgba(0,0,0,.15);
}
.primary-menu .menu-item-has-children.open > .sub-menu {
    display: block;
}
.primary-menu .sub-menu li{ margin-bottom:10px; }
.primary-menu .sub-menu li:last-child{ margin-bottom:0; }

/* =========================
   HAMBURGER
========================= */
.cs-hamburger{ display:none; background:none; border:0; }
.cs-hamburger span{ width:28px; height:3px; background:#000; display:block; margin:5px 0; }

/* =========================
   MOBILE NAV
========================= */
@media (max-width:768px){
  .cs-hamburger{ display:block; position:fixed; top:20px; left:20px; z-index:1002; }
  .site-nav{
    position:fixed; top:0; left:0; width:80%; max-width:320px; min-height:100svh;
    background:linear-gradient(160deg, rgba(30,30,45,.55), rgba(80,90,140,.35));
    backdrop-filter:blur(26px) saturate(140%); -webkit-backdrop-filter:blur(26px) saturate(140%);
    border-right:1px solid rgba(255,255,255,.18); box-shadow:10px 0 40px rgba(0,0,0,.35);
    transform:translateX(-100%); transition:.45s cubic-bezier(.77,0,.18,1);
    padding-top:100px; z-index:1001;
  }
  .site-nav.is-open{ transform:translateX(0); }
  .primary-menu{ flex-direction:column; align-items:flex-start; padding:0 25px; gap:22px; }
  .primary-menu>li{ width:100%; }
  .primary-menu>li>a{ color:#fff; font-size:20px; display:block; text-shadow:0 0 6px rgba(180,200,255,.45),0 2px 8px rgba(0,0,0,.6); }

  .primary-menu .sub-menu{
    position:static; background:none; padding-top:12px; margin-top:12px;
    border-top:1px solid rgba(255,255,255,.3); display:none;
  }
  .primary-menu .sub-menu {
    display: none;
}

.primary-menu .menu-item-has-children.open > .sub-menu {
    display: block;
}
  .primary-menu .sub-menu a{
    color:rgba(255,255,255,.9); font-size:18px; opacity:.85; display:block; margin-top:12px;
    text-shadow:0 0 4px rgba(180,200,255,.35),0 2px 6px rgba(0,0,0,.55);
  }

  .menu-item-has-children>a::after{ content:"▾"; float:right; font-size:14px; opacity:.6; margin-top:4px; }
  .menu-item-has-children.open>a::after{ transform:rotate(180deg); display:inline-block; }
}

/* =========================
   FOOTER
========================= */
.site-footer, footer{ margin-top:80px; padding:30px 0; text-align:center; font-size:14px; opacity:.75; }
.site-footer a, footer a{ text-decoration:none; opacity:.8; }
.site-footer a:hover, footer a:hover{ opacity:1; }

/* =========================
   PAGE PADDING
========================= */
.page .site-content, .page .content-area, .page main{
  padding-left:clamp(1.5rem,5vw,5rem); padding-right:clamp(1.5rem,5vw,5rem);
}

/* =========================
   HERO (HOME)
========================= */
.home{ overflow-x:hidden; }
.home .site-main{
  position:relative;
  padding:clamp(6rem,12vh,10rem) clamp(2rem,6vw,8rem);
  min-height:100svh;
  background:none; box-shadow:none; max-width:100%; margin:0;
}
.hero-panel{
  max-width:720px;
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-radius:32px; padding:3.8rem;
  box-shadow:0 24px 70px rgba(0,0,0,.08),0 0 0 1px rgba(255,255,255,.30) inset;
}
.hero-panel p{ line-height:1.6; }

@media (max-width:768px){
  .home .site-main{ padding:5rem 1.6rem 4rem; }
  .hero-panel{ max-width:100%; padding:2.4rem 1.8rem; border-radius:24px; }
}

/* =========================
   GLOBAL GLASS (SUBPAGES)
========================= */
.site-main, .site-content, .entry-content {

background:rgba(255,255,255,0.02);

backdrop-filter:blur(8px) saturate(110%);
-webkit-backdrop-filter:blur(8px) saturate(110%);

border-radius:26px;
padding:clamp(2.5rem,5vw,4.5rem);

box-shadow:
0 12px 40px rgba(0,0,0,.05),
0 0 0 1px rgba(255,255,255,.15) inset;

max-width:1100px;
margin:6vh auto;
}
/* =========================
   CELESTIAL WHISPER
========================= */
.site-header{ padding-bottom:0; margin-bottom:0; }
.site-header .celestial-whisper{
  display:flex; justify-content:center; width:100%;
  margin:.15rem 0 .25rem; pointer-events:none;
}
#whisper-text{
  font-family:'Satisfy',cursive;
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  color:rgba(25,30,45,.65); letter-spacing:.03em;
  background:rgba(255,255,255,.28); padding:.35em 1.1em; border-radius:999px;
  backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%);
  transition:opacity .6s ease;
}
.home .site-main{ padding-top:3rem; }
@media (max-width:768px){ .home .site-main{ padding-top:2.2rem; } }
@media (min-width: 769px) {
    .primary-menu .sub-menu {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
        pointer-events: none;
        transition:
            opacity 0.35s ease,
            transform 0.35s cubic-bezier(.22,.61,.36,1);
    }

    .primary-menu li:hover > .sub-menu {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
}
/* =========================
   SOUL ANCHOR
========================= */

.soul-anchor {
    max-width: 680px;
    margin: 2.4rem 0 0;
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    line-height: 1.6;
    color: rgba(30, 35, 50, 0.65);
    font-style: italic;
}

/* Mobile etwas zentrierter */
@media (max-width: 768px) {
    .soul-anchor {
        margin: 2rem auto 0;
        text-align: center;
    }
}
/* ===============================
   HERO SPLIT LAYOUT
================================ */

.home .hero-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
}

/* === HERO IMAGE CORE === */

.hero-image {
    width: min(42vw, 520px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Weicher Nebelrand */
.hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
        circle at center,
        rgba(255,255,255,0) 55%,
        rgba(255,255,255,0.25) 68%,
        rgba(255,255,255,0.6) 82%,
        rgba(255,255,255,0.95) 100%
    );
}

/* ===============================
   MOBILE HERO
================================ */
@media (max-width: 768px) {

  .hero-image {
      margin: 0 auto !important;
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
      justify-self: center;
      align-self: center;
  }

}
@media (max-width: 768px) {

  .home .hero-wrap {
      display: flex !important;
      flex-direction: column !important;
      align-items: center;
      gap: 2.8rem;
  }

  .home .hero-panel {
      width: 100%;
      max-width: 100%;
      text-align: left;
  }

  .home .hero-image {
      width: 72vw;
      max-width: 320px;
      aspect-ratio: 1 / 1;
      margin: 0 auto;
      display: block;
  }

  .home .hero-image-circle {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
  }

}
/* =========================
   FRÜHLINGS SPECIAL BOX
========================= */

.celestial-special-box{
    max-width:520px;
    margin:35px auto 30px auto;

    padding:18px 26px;

    background:rgba(255,255,255,0.75);
    backdrop-filter:blur(12px) saturate(120%);
    -webkit-backdrop-filter:blur(12px) saturate(120%);

    border:1px solid rgba(199,164,106,0.35);
    border-radius:28px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.06),
        0 0 0 1px rgba(255,255,255,0.4) inset;

    text-align:center;

    font-size:15px;
    line-height:1.55;
}

.celestial-special-box strong{
    font-weight:600;
}

.celestial-special-button{
    display:inline-block;
    margin-top:12px;

    padding:9px 18px;

    background:#c7a46a;
    color:white;

    border-radius:20px;

    text-decoration:none;
    font-size:14px;

    transition:all .25s ease;
}

.celestial-special-button:hover{
    background:#b89458;
    transform:translateY(-1px);
}

/* =========================
   ALTER SPECIAL BANNER AUS
========================= */

.celestial-special-notice{
    display:none !important;
}

body > .celestial-special-notice{
    display:none !important;
}/* =========================
   SPRING PETALS
========================= */

.spring-petals{
position:absolute;
top:0;
left:0;
width:100%;
height:320px;

pointer-events:none;
overflow:hidden;
z-index:0;
}

/* einzelne Blüten */

.spring-petals span{
position:absolute;

width:20px;
height:16px;

background:radial-gradient(circle at 30% 30%,
rgba(255,200,215,0.9),
rgba(255,180,200,0.7) 60%,
rgba(255,200,215,0) 80%);

border-radius:60% 40% 60% 40%;

opacity:.65;

animation:petal-drift linear infinite;
}

/* Bewegung */

@keyframes petal-drift{

0%{
transform:translateY(-40px) translateX(0) rotate(0deg);
opacity:0;
}

10%{
opacity:.7;
}

50%{
transform:translateY(120px) translateX(40px) rotate(120deg);
}

100%{
transform:translateY(320px) translateX(80px) rotate(360deg);
opacity:0;
}

}

/* unterschiedliche Startpunkte */

.spring-petals span:nth-child(1){
left:5%;
top:-10px;
animation-duration:18s;
}

.spring-petals span:nth-child(2){
left:15%;
top:-60px;
animation-duration:22s;
}

.spring-petals span:nth-child(3){
left:30%;
top:-30px;
animation-duration:20s;
}

.spring-petals span:nth-child(4){
left:45%;
top:-90px;
animation-duration:24s;
}

.spring-petals span:nth-child(5){
left:60%;
top:-50px;
animation-duration:19s;
}

.spring-petals span:nth-child(6){
left:72%;
top:-70px;
animation-duration:23s;
}

.spring-petals span:nth-child(7){
left:85%;
top:-40px;
animation-duration:21s;
}

.spring-petals span:nth-child(8){
left:95%;
top:-80px;
animation-duration:26s;
}

@media (max-width:768px){

.spring-petals{
height:220px;
}

}