/* ===================================================================
   Paula’s Garden – Globales Stylesheet (für alle Unterseiten)
   =================================================================== */

/* 0. Schriften ----------------------------------------------------- */
@import url('fonts.css');

/* 1. Root-Variablen ----------------------------------------------- */
:root {
  --accent:       #b0d3cd;
  --green:        #7d998b;
	--dunkelgreen: #4a564c;
  --bgSoft:       #fcfcfa;
  --rosa:         #FDEFF4;
--dunkelrosa:     #FFB6C1;
  --shadow:       0 2px 18px #9bbda722;
  --radius:       2rem;
	--nav-height:   150px;
  --nav-gap:      2.2rem;
  --footer-bg:    #7d998b;
  --footer-text:  #fff;
  --icon-size:    2.6rem;
}

/* 2. CSS-Reset / Basics ------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  font-family: 'Montserrat', Arial, sans-serif;
  background: var(--rosa);
  color: var(--green);
  
  overflow-x: hidden; /* Verhindert horizontales Scrollen */
	overflow-y: hidden;
}
main {
  height: 900px;   
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertikal */
  align-items: center;      /* Horizontal */
}

h1,h2,h3,h4,h5 {color:var(--dunkelgreen)
}
.btn-primary {
    background: var(--green) !important;
    color: var(--dunkelgreen) !important;
}

.bottom-nav .home img {width:100px;
height: 100px;}

/* 2. Überschrift/Header ------------------------------------------- */
/* Neuer Glasmorphismus-Header */
.glassbox-header {
    top:0;
    left:2%;
  background: rgba(255,255,255,0.55);
  box-shadow:
    0 8px 64px rgba(31,38,135,0.1),
    inset 0 0 0 2px rgba(255,255,255,0.3);
  backdrop-filter: blur(18px);
  border-radius: 0  0 2.5rem 2.5rem;
 
  
  max-width: 1000px;
  text-align: center;
  position: relative;
  z-index: 5;
}

.header-inner h1 {
  font-size: 2.5rem;
  color: var(--dunkelgreen);
  font-weight: 700;
  text-shadow: 0 2px 12px #fff;
  
}

.header-inner .script {
  font-size: 3rem;
  color: var(--green);
  font-family: "Dancing Script", cursive;
  display: block;
  
}

.header-inner .subline {
  font-size: 1.5rem;
  color: var(--dunkelgreen);
  line-height: 1.4;
  max-width: 780px;
  
}
.subline {
    position: relative;
    left: 3%;
    font-size: 1.5rem;
    color: var(--dunkelgreen);
    padding: .5rem;
    /* background: rgba(255,255,255,0.55); */
    box-shadow: 0 8px 64px rgba(31,38,135,0.1),
    inset 0 0 0 2px rgba(255,255,255,0.3);
    /* backdrop-filter: blur(18px); */
    border-radius: 2.5rem;
}


.text-success {color: var(--green) !important}
/* 3. Utility-Klassen ---------------------------------------------- */
.fett {
  font-weight: 600;
  color: #274423;
}

/* 4. Logo-Glassmorphism-Box oben rechts --------------------------- */
.logo-glass {
  background: rgba(255,255,255,0.5);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.12);
  backdrop-filter: blur(14px);
  border-radius: 0 0 2.5rem 2.5rem;
  padding: 2.2rem 3.4rem 2.1rem 3.4rem;
  position: absolute;
  top: -2rem;
  right: 4rem;
  z-index: 30;
  border-top: none;
}
.logo-glass img {
  height: 8rem;
  width: auto;
}

.glass-box {background: rgba(255,255,255,0.5);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.12);
  backdrop-filter: blur(14px);
  border-radius: 2.5rem;
    padding: 5rem;}


/* 6. Footer & Bottom Navigation ----------------------------------- */
footer {
  position: fixed;
  left: var(--nav-gap);
  right: var(--nav-gap);
  bottom: 0;
  z-index: 50;
  background: transparent;
}
.bottom-nav {
  display: flex;
  justify-content: space-around;
  
  background: var(--footer-bg);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  list-style: none;
}
.bottom-nav li {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.bottom-nav a {
  text-decoration: none;
  color: var(--footer-text);
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32em;
  transition: color 0.2s;
}
.bottom-nav a.current
 {
  color: #fffbea;
}
.bottom-nav img {
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  /* Dezent, aber sichtbar */
  filter: drop-shadow(0 2px 8px #4a564c);
  transition: filter 0.18s;
}

.bottom-nav span {
  margin-top: 0.2em;
  line-height: 1.18;
  letter-spacing: -0.5px;
  /* Sanfter Schatten unter Text für Tiefe */
  text-shadow: 0 2px 7px #5e8e7533;
}
.bottom-nav {
  backdrop-filter: blur(2px);
  /* background bleibt, wird dadurch leicht matter */
}

/* 7. Icon-Glühen je nach aktuellem Menüpunkt ---------------------- */
/* Lovestory */
.bottom-nav a.current img[src*="heart"] {
  filter: drop-shadow(0 0 18px #ff3351) brightness(1.25) saturate(1.2);
}
/* Events */
.bottom-nav a.current img[src*="calendar"] {
  filter: drop-shadow(0 0 18px #ffaf33) brightness(1.18) saturate(1.2);
}
/* Gutscheine */
.bottom-nav a.current img[src*="gift"] {
  filter: drop-shadow(0 0 18px #e57be7) brightness(1.18) saturate(1.2);
}
/* News */
.bottom-nav a.current img[src*="news"] {
  filter: drop-shadow(0 0 18px #55aaff) brightness(1.18) saturate(1.2);
}
/* Menü */
.bottom-nav a.current img[src*="home"] {
  filter: drop-shadow(0 0 18px #7dcf77) brightness(1.18) saturate(1.2);
}
/* Entdecken */
.bottom-nav a.current img[src*="leaf"] {
  filter: drop-shadow(0 0 18px #69d682) brightness(1.18) saturate(1.2);
}
/* Angebote */
.bottom-nav a.current img[src*="blume"] {
  filter: drop-shadow(0 0 18px green) brightness(1.18) saturate(1.2);
}

/* 8. Große Button-Styles (z.B. für Gutscheine) -------------------- */
.btn-lg {
  width: 100%;
  font-size: 2.35rem;
  padding: 1rem 0;
  border-radius: 1.3rem;
  background: #b0d3cd;
  color: #4a564c;
  border: none;
  margin-top: 1.2rem;
  cursor: pointer;
  transition: background 0.18s;
}
.page-fade {
  position: fixed;
  inset: 0;
  background: rgba(250,253,248,0.95);

  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(.74,0,.16,1);
}
.screensaver-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem; /* Abstand zwischen Button und Logo */
  z-index: 2;
  pointer-events: none;
}



/* 9. Swiper-Button Pfeile (dezent) ------------------------------- */
.swiper-button-prev,
.swiper-button-next {
  background: rgb(191 231 166 / 0.32);
  border-radius: 50%;
  width: 54px;
  height: 54px;
  top: 40%;
  box-shadow: 0 4px 18px rgba(20,20,30,0.08);
  color: var(--dunkelgreen);
  transition: background 0.2s;
}

.swiper-button-prev { left: -18px; }
.swiper-button-next { right: -18px; }

/* 10. Slider: overflow sichtbar für Bildüberstand ---------------- */
.angebote-slider-wrapper,
.swiper,
.swiper-wrapper,
.swiper-slide {
  overflow: visible !important;
}

/* 9. Responsive Footer -------------------------------------------- 
@media (max-width: 900px) {
  footer {
    left: 0.5rem;
    right: 0.5rem;
  }
  .bottom-nav {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
  }
}*/

/* ========== ENDE main.css ========== */