/* ---------------------------------------------------------------------------
		WCSpot - consolidated stylesheet
		- reorganized for clarity: variables, base, components, layout, utilities
		- keeps existing animations and visual identity
 --------------------------------------------------------------------------- */

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

/* -----------------------------
		CSS variables / theme
		----------------------------- */
:root{
	--wcspot-purple-1: #667eea;
	--wcspot-purple-2: #764ba2;
	--wcspot-accent: linear-gradient(135deg,var(--wcspot-purple-1) 0%,var(--wcspot-purple-2) 50%,#f093fb 100%);
	--max-content-width: 1120px;
}

/* -----------------------------
		Base
		----------------------------- */
*{box-sizing:border-box;font-family:'Inter',sans-serif}
html,body{height:100%}
.wcspot-gradient{background:var(--wcspot-accent)}

/* -----------------------------
		Animations (kept from original)
		----------------------------- */
.nav-slide-down{animation:slideDown .8s ease-out;overflow:visible}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
.logo-bounce{animation:logoBounce 2s ease-in-out infinite}
@keyframes logoBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.hero-animation{opacity:0;transform:translateY(30px);animation:heroFadeIn .8s ease-out forwards}
.hero-delay-1{animation-delay:.2s}.hero-delay-2{animation-delay:.4s}.hero-delay-3{animation-delay:.6s}
@keyframes heroFadeIn{to{opacity:1;transform:translateY(0)}}
.floating-element{position:absolute;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}33%{transform:translateY(-20px) rotate(5deg)}66%{transform:translateY(-10px) rotate(-5deg)}}
.floating-phone{animation:floatingPhone 4s ease-in-out infinite}
@keyframes floatingPhone{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(1deg)}50%{transform:translateY(-20px) rotate(0)}75%{transform:translateY(-10px) rotate(-1deg)}}
.bounce-in{animation:bounceIn .8s cubic-bezier(.68,-.55,.265,1.55)}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
.pulse-on-hover:hover{animation:pulse .6s}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}

/* -----------------------------
		Utilities & common components
		----------------------------- */
.nav-link{position:relative;overflow:hidden}
.nav-link::before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(135deg,var(--wcspot-purple-1),var(--wcspot-purple-2));transition:width .3s}
.nav-link:hover::before{width:100%}
.btn-hover-effect{position:relative;overflow:hidden;transition:all .3s}
.btn-hover-effect::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}
.btn-hover-effect:hover::before{left:100%}
.btn-hover-effect:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.2)}

.scroll-reveal{opacity:0;transform:translateY(30px);transition:all .6s cubic-bezier(.4,0,.2,1)}
.scroll-reveal.revealed{opacity:1;transform:translateY(0)}

/* -----------------------------
		Header / logo
		----------------------------- */
/* Header logo: centralized style used across pages */
.header-logo{
	width: 72px; /* larger for stronger branding */
	height: 72x;
	border-radius:9px; /* rounded-square */
	object-fit:cover;
	display:block;
	transform:translateY(8px); /* hang slightly over header */
	box-shadow:0 24px 56px rgba(0,0,0,0.32);
	transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease;
}



/* -----------------------------
		Navigation (desktop + mobile shared rules)
		----------------------------- */
.nav-container{max-width:var(--max-content-width);margin:0 auto;padding:0 1rem}

/* Mobile menu visibility helpers (used by JS) */
.mobile-menu-hidden{max-height:0;overflow:hidden;transition:max-height .28s ease-out,opacity .2s}
.mobile-menu-visible{max-height:100vh;opacity:1;transition:max-height .32s ease-in,opacity .2s}

/* Ensure mobile menu markup variance across pages is supported:
	 - Some pages use #mobile-menu > .menu-inner > .block
	 - Others use simple list of <a> blocks
*/
#mobile-menu{background:#fff}
#mobile-menu .menu-inner{max-width:420px;margin:0 auto;width:100%}
#mobile-menu .block, #mobile-menu a.block, #mobile-menu a{font-size:1.05rem;padding:14px 16px;margin:8px 0;border-radius:12px;display:block;color:#374151}
		.mobile-menu-btn{display:flex;align-items:center;justify-content:center;width:64px;height:64px;padding:10px;border-radius:14px;margin-left:auto}
 		.mobile-menu-btn svg{width:28px;height:28px;display:block}


/* -----------------------------
		Hero / phone mockup / features
		----------------------------- */
.phone-mockup{background:linear-gradient(145deg,#f0f0f0,#d0d0d0);border-radius:28px;padding:12px;box-shadow:0 20px 40px rgba(0,0,0,.18);position:relative}
.phone-screen{background:linear-gradient(135deg,var(--wcspot-purple-1) 0%,var(--wcspot-purple-2) 100%);border-radius:22px;height:500px;width:250px;position:relative;overflow:hidden}
.app-interface{position:absolute;top:20px;left:20px;right:20px;bottom:20px;background:white;border-radius:20px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.feature-card{transition:all .4s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(30px)}
.feature-card.animate{opacity:1;transform:translateY(0)}
.feature-card:hover{transform:translateY(-10px);box-shadow:0 25px 50px rgba(0,0,0,.12)}

/* -----------------------------
		Footer
		----------------------------- */
.footer-slide-up{animation:slideUp 1s ease-out}
@keyframes slideUp{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}
.footer-section{opacity:0;transform:translateY(30px);animation:fadeInUp .8s ease-out forwards}
.footer-section:nth-child(1){animation-delay:.1s}.footer-section:nth-child(2){animation-delay:.2s}.footer-section:nth-child(3){animation-delay:.3s}.footer-section:nth-child(4){animation-delay:.4s}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}
.footer-link{position:relative;transition:all .3s}
.footer-link::after{content:'';position:absolute;width:0;height:2px;bottom:-2px;left:0;background:var(--wcspot-purple-1);transition:width .3s}
.footer-link:hover::after{width:100%}
.social-icon:hover{box-shadow:0 0 20px rgba(102,126,234,.45)}

/* -----------------------------
		Misc helpers
		----------------------------- */
.fade-in-up{opacity:0;transform:translateY(20px);animation:fadeInUp .8s ease-out forwards}

/* Responsive adjustments */
@media (max-width:768px){
	.hero-animation{transform:translateY(20px)}
	.feature-card{transform:translateY(15px)}
	.phone-mockup{transform:scale(.82)}
	/* Ensure content containers on datenschutz/agb have comfortable padding */
	.max-w-4xl{padding-left:1rem;padding-right:1rem}
	.back-button{font-size:0.95rem}
}

/* keep this small utility for small inline usage */
.wcspot-gradient-rounded{background:var(--wcspot-accent);border-radius:9999px}

/* -----------------------------
		 Mobile / Accessibility tweaks
		 Applies responsive optimizations site-wide so pages read well on phones
		 ----------------------------- */

/* Make images responsive */
img{max-width:100%;height:auto;display:inline-block}

/* Small-screen defaults: compact but readable header/logo for narrow phones */
@media (max-width:480px){
	/* very compact logo on very small screens */
	.header-logo{width:18px;height:18px;transform:translateY(2px)}

	/* reduce header bar height so it uses minimal vertical space on phones */
	nav.nav-slide-down .h-16{height:24px !important;min-height:24px}

	/* tighten mobile overlay padding so content appears close to the top */
	#mobile-menu.mobile-menu-visible{padding-top:18px}
}

/* Ensure the main content containers retain comfortable top spacing when nav is fixed
   Many pages use classes like .max-w-4xl/.max-w-6xl/.max-w-7xl — provide safe defaults */
.max-w-4xl,.max-w-6xl,.max-w-7xl{padding-left:1rem;padding-right:1rem}
@media (max-width:768px){
	/* Reduce top offset so fixed header doesn't push content too far down on phones */
	.max-w-4xl,.max-w-6xl,.max-w-7xl{padding-top:calc(52px + 6px)}
}

/* Improve paragraph readability on small screens */
p, li { line-height:1.6; word-break:break-word }

/* Mobile menu touch targets and spacing */
#mobile-menu a, #mobile-menu .block{min-height:48px;line-height:1.4;border-radius:12px}
#mobile-menu{font-size:1.05rem}

/* Ensure footer stacks legibly on narrow screens */
@media (max-width:640px){
	.footer-section{margin-bottom:1rem}
	.footer-section h3, .footer-section h4{font-size:1.05rem}
}

/* Prevent text resizing quirks on iOS */
@media (max-width:768px){
  .header {
    position: relative;
    height: 80px;               /* Header-Höhe */
    display: flex;
    align-items: center;        /* vertikal mittig */
    justify-content: space-between; /* Logo links, Button rechts */
    padding: 0 16px;
  }

  /* Logo nur mobil größer */
  .header-logo {
    width: 80px;
    height: 80px;
    max-height: 80px;
  }

  /* Hamburger rechts außen */
  .mobile-menu-btn {
    height: 20%;                /* volle Header-Höhe */
    display: flex;
    align-items: center;         /* vertikal mittig */
    justify-content: center;     /* horizontale Zentrierung im Button */
    cursor: pointer;
  }

  .mobile-menu-btn svg {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
  }

  /* Zustand beim Klicken */
  .mobile-menu-btn.active svg {
    transform: rotate(90deg);    /* Icon dreht sich */
  }
}


/* Ensure footer stacks legibly on narrow screens */
@media (max-width:640px){
	.footer-section{margin-bottom:1rem}
	.footer-section h3, .footer-section h4{font-size:1.05rem}
}

/* Improve paragraph readability on small screens */
p, li { line-height:1.6; word-break:break-word }

/* Prevent text resizing quirks on iOS */
html,body{ -webkit-text-size-adjust:100%; }