/* ===================================================== */
/* ================== BASIS & LAYOUT =================== */
/* ===================================================== */

:root {
    --flieder: #E6DAF0;
    --dunkelviolett: #5E4B8B;
    --blau: #4A6FA5;
    --hintergrund: #F9F7FB;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--hintergrund);
}

html {
  -webkit-text-size-adjust: 100%;
}


.page {
    position: relative;
    min-height: 100vh;
}

/* Fade-in animation */
.fade-in {
    opacity: 0;
    animation: fadeIn 1.8s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Navigation */
.top-nav {
    position: absolute;
    top: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 2rem); /* FIX */
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.45rem 1rem;
    background: rgba(94, 75, 139, 0.6);
    border-radius: 999px;
    z-index: 10;
    font-size: 1rem;
}

.top-nav a {
    color: #fff;
    text-decoration: none;
    padding: 0.3rem 0.8rem;
    line-height: 1;
    border-radius: 999px;
    transition: background-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease;
}

.top-nav a:hover {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

.top-nav a.active {
    background: rgba(230, 218, 240, 0.9);
    color: var(--dunkelviolett);
}

/* Startseite Hero */
.first-hero {
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;   /* Trick */
    background: url('../bilder/lavendel_blauer_schmetterling.jpg') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding-top: 5.3rem;
    padding-bottom: 4rem;
}

.first-hero h1 {
    margin-top: 0.35rem;
    margin-bottom: 1em;
    font-weight: normal;
}

.logo-img {
    max-width: 722px;
    width: min(722px, 85vw);
    height: auto;
    margin-bottom: 1rem;
    filter:
        drop-shadow(0 0 14px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 22px rgba(255, 255, 255, 0.5));
}

.welcome-sub {
    font-size: 1.6rem;
    margin-top: 0.35rem;
    color: #fff;
    text-shadow:
        0 0 4px rgba(0, 0, 0, 0.8),
        0 0 14px rgba(0, 0, 0, 0.7);
}

.welcome-btn {
    margin-top: 1.8rem;
    padding: 0.85rem 2.2rem;
    background: rgba(94, 75, 139, 0.95);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.45);
    transition: background-color 0.25s ease,
                transform 0.25s ease,
                box-shadow 0.25s ease;
    position: relative;
    overflow: visible;
}

/* Footer */
.site-footer {
    position: fixed;
    bottom: 0.4rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* Pillen-Hintergrund */
.site-footer span {
    display: inline-block;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    pointer-events: auto; /* Inhalt wieder klickbar */
}

/* Links im Footer */
.site-footer a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.site-footer a:hover {
    opacity: 0.75;
}

/* ===================================================== */
/* ================== CONTENT-BOX ====================== */
/* ===================================================== */

.content-box {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    background: rgba(249, 247, 251, 0.86);
    border-radius: 24px;
    border: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* Basic text formatting inside content-box */
.content-box p {
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 1rem;
}

.content-box ul {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 1.2rem;
}

.content-box li {
    margin-bottom: 0.3rem;
}

/* Links inside content-box */
.content-box a {
    color: #5E4B8B;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.content-box a:hover {
    opacity: 0.7;
}

/* Small responsiveness tweak */
@media (max-width: 600px) {
    .welcome-sub {
        font-size: 1.35rem;
    }
    .welcome-btn {
        font-size: 1rem;
        padding: 0.8rem 1.8rem;
    }
    .top-nav {
        font-size: 0.9rem;
        padding: 0.35rem 0.8rem;
    }
}

/* --- Butterfly animation (only on Welcome button) --- */
.welcome-btn .butterfly-wrap {
    position: absolute;
    left: -10px;
    top: -12px;
    width: 28px;
    display: block;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
    will-change: opacity, offset-distance, transform;
    offset-rotate: 0deg;
}

.welcome-btn .butterfly {
    width: 28px;
    display: block;
    transform-origin: 50% 60%;
    animation: butterfly-idle 3.6s ease-in-out infinite;
}

/* Click behaviour */
.welcome-btn.fly .butterfly {
    animation: butterfly-flap 0.22s ease-in-out 0s 7;
}

/* Smooth flight */
@supports (offset-path: path("M0,0 L1,1")) {
    .welcome-btn .butterfly-wrap {
        offset-path: path("M0,0 C18,0 55,-10 85,-28 C120,-48 165,-62 205,-78");
        offset-anchor: 0 0;
        offset-distance: 0%;
        opacity: 1;
    }

    .welcome-btn.fly .butterfly-wrap {
        animation: butterfly-path 1.35s cubic-bezier(.22,.61,.36,1) forwards;
    }

    @keyframes butterfly-path {
        0%   { offset-distance: 0%;   opacity: 1; }
        65%  { opacity: 0.75; }
        100% { offset-distance: 100%; opacity: 0; }
    }
}

/* Fallback */
@supports not (offset-path: path("M0,0 L1,1")) {
    .welcome-btn.fly .butterfly-wrap {
        animation: butterfly-click-flight 1.35s cubic-bezier(.22,.61,.36,1) forwards;
    }

    @keyframes butterfly-click-flight {
        0%   { transform: translate3d(0,0,0); opacity: 1; }
        10%  { transform: translate3d(10px,-5px,0); }
        25%  { transform: translate3d(45px,-18px,0); }
        45%  { transform: translate3d(90px,-34px,0); }
        65%  { transform: translate3d(140px,-52px,0); opacity: .7; }
        100% { transform: translate3d(205px,-78px,0); opacity: 0; }
    }
}

/* Idle: rotation ONLY (no zoom) */
@keyframes butterfly-idle {
    0%   { transform: rotate(-4deg); }
    50%  { transform: rotate(4deg); }
    100% { transform: rotate(-4deg); }
}

/* Flap: clearly visible wing motion */
@keyframes butterfly-flap {
    0%   { transform: rotate(-14deg); }
    50%  { transform: rotate(14deg); }
    100% { transform: rotate(-14deg); }
}

@media (prefers-reduced-motion: reduce) {
    .welcome-btn .butterfly { animation: none; }
    .welcome-btn.fly .butterfly-wrap { animation: none; opacity: 0; }
}

/* ===================================================== */
/* ================== INHALTS-ÜBERSCHRIFTEN ============ */
/* ===================================================== */

/* Hauptüberschrift innerhalb der Content-Box */
.content-box > h1:first-of-type {
    color: var(--dunkelviolett);
}

.content-box h2 {
    color: #000;
}

/* Abschnittsüberschriften innerhalb der Content-Box */
.content-box h3 {
    color: #000;
}

/* ===================================================== */
/* ================== SPIRITUELLER LEITSATZ ============ */
/* ===================================================== */

.leitsatz {
    text-align: center;
    margin: 2.2rem 0;
    font-style: italic;
}

/* ===================================================== */
/* ================== UNTERSEITEN HERO ================= */
/* ===================================================== */

.page-title {
    font-family: 'Pacifico', cursive;
    font-size: 2.4rem;
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--dunkelviolett);
}

.hero-sub {
    min-height: 100vh;
    min-height: 100svh;
    padding: 6rem 1.5rem 3rem;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Hintergrundbilder der Unterseiten */

.page-ueber .hero-sub {
    background-image: url('../bilder/natur_wald.jpg');
}

.page-angebot .hero-sub {
    background-image: url('../bilder/natur_lichtspiel.jpg');
}

.page-kontakt .hero-sub {
    background-image: url('../bilder/natur_baum.jpg');
}

/* ===================================================== */
/* ================== KONTAKT MAIL-LINK ================ */
/* ===================================================== */

.mail-wrapper {
    
    margin-bottom: 1.5rem;
}

.mail-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--dunkelviolett);
    font-weight: 700;
    line-height: 1.2;
    transition: opacity 0.2s ease;
}

.mail-link:hover {
    opacity: 0.8;
}

.mail-icon {
    width: 20px;
    height: 20px;
    fill: var(--dunkelviolett);
    display: block;
    transform: translateY(1px);
}

/* ===================================================== */
/* ================== IMPRESSUM ONLY =================== */
/* ===================================================== */

.page-impressum .hero-sub {
    background-image: url('../bilder/natur_baum.jpg');
}

.page-impressum .content-box {
    padding: 3rem;
}

/* ===================================================== */
/* ============== HANDY-REGELN (MOBILE) ================= */
/* ===================================================== */

@media (max-width: 768px) {

  /* HERO als Anker */
  .first-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* leichter Fokus höher */
    background-position: center 35%;
  }

  /* NAV */
  .top-nav {
    position: absolute;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;

    display: flex;
    gap: 0.6rem;

    padding: 0.45rem 0.95rem;

    background: rgba(94, 75, 139, 0.5);
    border-radius: 999px;
    font-size: 0.85rem;
    white-space: nowrap;

    max-width: calc(100% - 1.4rem);
    box-sizing: border-box;
  }

  .top-nav a {
    padding: 0.35rem 0.45rem;
    display: inline-block;
  }

  /* TEXT */
  .welcome-sub {
    font-size: 1rem;
    padding: 0 1.2rem;
    line-height: 1.25;
  }

  /* BUTTON Basis */
  .welcome-btn {
    font-size: 1.0rem;
    padding: 0.65rem 1.4rem;
  }

  /* Hover-Fix (damit er nicht springt) */
  .welcome-btn:hover {
    transform: translateX(-50%) translateY(-3px);
  }

  .welcome-btn:active {
    transform: translateX(-50%) scale(0.98);
  }

  .site-footer {
    position: relative;
    
  }
}

/* ---------- PORTRAIT ---------- */
@media (max-width: 768px) and (orientation: portrait) {

  .logo-img {
    width: min(380px, 85vw);
    margin-top: -16rem;
  }

  .welcome-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;

    bottom: calc(clamp(6svh, 10svh, 14svh) + env(safe-area-inset-bottom, 0px));
    margin: 0;
  }
}

/* ---------- MOBILE LANDSCAPE (Querformat) ---------- */
@media (max-width: 768px) and (orientation: landscape) {

  .top-nav{
    top: 0.6rem;
    font-size: 0.72rem;
    padding: 0.3rem 0.6rem;
  }

  .first-hero{
    justify-content: flex-start;
    padding-top: 3rem;
    padding-bottom: calc(6svh + env(safe-area-inset-bottom, 0px));
  }

  /* Logo deutlich kompakter */
  .logo-img{
    width: min(300px, 48vw);
    margin-top: 0;
    margin-bottom: 0.15rem;
  }

  /* Claim kleiner */
  .welcome-sub{
    font-size: 1.0rem;
    margin-top: 0;
  }

  /* Button ruhiger */
  .welcome-btn{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(4svh + env(safe-area-inset-bottom, 0px));
    margin: 0;
  }
}

/* Professional mobile logo wrapper */
.logo-picture {
    display: contents;
}

/* ===================================================== */
/* ================== TABLET FEINSCHLIFF =============== */
/* ===================================================== */

@media (min-width: 769px) and (max-width: 1024px) {

  .first-hero {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .logo-img {
    width: min(640px, 82vw);
  }

}

/* =========================
   404 STYLING
========================= */

.error-page .top-nav,
.error-page .site-footer {
    display: none !important;
}

.error-hero {
    text-align: center;
    padding-top: 25vh;
    padding-left: 20px;
    padding-right: 20px;
}

.error-title {
    font-size: 2.8rem;
    color: #ffffff;
    text-shadow: 0 4px 18px rgba(0,0,0,0.55);
}

.error-text {
    font-size: 1.4rem;
    color: #ffffff;
    text-shadow: 0 4px 18px rgba(0,0,0,0.55);
}

.error-hero .welcome-btn {
    margin-top: 1.8rem;
}

@media (max-width: 768px) {

    .error-title {
        font-size: 1.9rem;
    }

    .error-text {
        font-size: 1.1rem;
    }

}

@media (max-height: 500px) {

    .error-hero {
        padding-top: 10vh;
    }

}

/* =====================================
   MOBILE TAP + RENDERING FIXES
===================================== */

/* Remove grey tap highlight on mobile browsers */
.welcome-btn,
.top-nav a {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* Clean focus handling */
.welcome-btn:focus {
  outline: none;
}

.welcome-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.65);
  outline-offset: 3px;
}

/* Only apply hover effects on real hover devices (desktop) */
@media (hover: hover) and (pointer: fine) {
  .welcome-btn:hover {
    background: var(--blau);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  }
}

/* Improve touch responsiveness */
.welcome-btn {
  touch-action: manipulation;
}

/* Force smoother GPU rendering for animated elements */
.welcome-btn .butterfly-wrap,
.logo-img {
  will-change: transform;
  
  backface-visibility: hidden;
}

/* Reduce heavy blur + filters on mobile for smoother scroll */
@media (max-width: 768px) {

  .logo-img,
  .welcome-btn .butterfly-wrap {
    filter: none !important;
  }

}

/* FIX – extra Stabilisierung für sehr kleine Landscape Höhen */
@media (max-height: 500px) and (orientation: landscape) {
  .first-hero{
    padding-top: 3rem;
    
  }
}

/* ===================================================== */
/* ===== STABLE MOBILE FOOTER POSITION FIX (<=768px) ==== */
/* ===================================================== */

@media (max-width: 768px) {

  /* Footer always below the hero image on phones */
  .site-footer {
    position: relative;
    margin-top: 2rem;
  }

  /* Ensure hero does not trap footer inside viewport height */
  .first-hero {
    
  }

}