/* =========================
RESET
========================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background: #ffffff;
  color: #1f2937;
  line-height: 1.6;
}

/* =========================
LAYOUT
========================= */

.container {
  width: 90%;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

.section {
  padding: 100px 0;
}

.bg-light {
  background: #f9fafb;
}

.trust-section {
  margin-top: 40px;
}

/* =========================
HERO SECTION
========================= */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Background Image */

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
  z-index: 0;
  transform: translateY(0);
  transition: transform 0.2s ease-out;
}

/* Overlay */

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.55),
    rgba(20,0,10,0.75)
  );
  z-index: 1;
}

/* Logo */

.hero-logo {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;

  padding: 8px 20px;
  border-radius: 40px;

  backdrop-filter: blur(10px);
  background: rgba(0,0,0,0.35);
}

.hero-logo img {
  height: 32px;
  width: auto;
  display: block;
}

/* Desktop Logo */

@media (min-width: 768px) {

  .hero-logo {
    left: 40px;
    transform: none;
    top: 22px;
  }

  .hero-logo img {
    height: 40px;
  }

}

/* Content */

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 120px 20px 60px;
  margin: 0 auto;
  color: #ffffff;
}

/* Headline */

.hero-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 22px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-shadow: 0 6px 22px rgba(0,0,0,0.45);
}

.hero-title span {
  opacity: 0.9;
}

@media (min-width: 640px) {

  .hero-title {
    font-size: 38px;
  }

}

@media (min-width: 1024px) {

  .hero-title {
    font-size: 52px;
  }

}

/* Subline */

.hero-subline {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.95;
  text-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.hero-subline span {
  display: block;
  margin-top: 6px;
  font-size: 0.92em;
  opacity: 0.75;
}

@media (min-width: 640px) {

  .hero-subline {
    font-size: 17px;
  }

}

@media (min-width: 1024px) {

  .hero-subline {
    font-size: 18px;
  }

}

/* Benefits */

.hero-benefits {
  list-style: none;
  margin-bottom: 30px;
}

.hero-benefits li {
  margin-bottom: 10px;
  font-weight: 500;
}

/* CTA Button */

.btn-primary{
display:inline-block;
padding:16px 34px;
border-radius:999px;
background:linear-gradient(135deg,#ff4d6d,#ff2e63);
color:#fff;
font-weight:600;
font-size:17px;
box-shadow:0 15px 40px rgba(255,60,100,0.45);
transition:.25s ease;
}

.btn-primary:hover{
transform:translateY(-3px) scale(1.03);
box-shadow:0 20px 50px rgba(255,60,100,0.55);
}

/* =========================
GRID
========================= */

.grid-3 {

  display: grid;

  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));

  gap: 24px;

  margin-top: 40px;

}

.card {

  background: #f3f4f6;

  padding: 24px;

  border-radius: 12px;

  transition: 0.3s ease;

}

.card:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);

}

.card h3 {

  margin-bottom: 10px;

}

/* =========================
FINAL CTA
========================= */

.final-cta {

  background: #dc2626;

  color: #ffffff;

}

.btn-secondary {

  display: inline-block;

  margin-top: 25px;

  padding: 14px 28px;

  background: #ffffff;

  color: #dc2626;

  border-radius: 8px;

  font-weight: 600;

  transition: 0.3s ease;

}

.btn-secondary:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 25px rgba(0,0,0,0.15);

}

/* =========================
FOOTER
========================= */

.footer {

  border-top: 1px solid #e5e7eb;

  padding: 40px 20px;

  text-align: center;

  font-size: 14px;

  color: #6b7280;

}

.footer-links {

  margin: 15px 0;

}

.footer-links a {

  margin: 0 10px;

  color: #4b5563;

  text-decoration: none;

}

.footer-links a:hover {

  text-decoration: underline;

}

/* =========================
ANIMATIONS
========================= */

.fade-section {

  opacity: 0;

  transform: translateY(30px);

  transition: opacity 0.7s ease, transform 0.7s ease;

}

.fade-section.show {

  opacity: 1;

  transform: translateY(0);

}

@keyframes heroCtaIntro {

  0% { transform: translateY(10px) scale(0.98); opacity: 0; }

  60% { transform: translateY(-2px) scale(1.01); opacity: 1; }

  100% { transform: translateY(0) scale(1); }

}

.hero-cta-intro {

  animation: heroCtaIntro 700ms cubic-bezier(.21,.9,.27,1);

}

/* STICKY CTA */

.sticky-cta{
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(20px);
max-width: 420px;
width: 92%;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: all 0.4s ease;
display: none;
justify-content: center;
}

.sticky-cta.visible{
display:flex;
opacity:1;
transform: translateX(-50%) translateY(0);
pointer-events:auto;
}

.sticky-cta a{
width:100%;
text-align:center;
}

/* nur mobile */

@media (max-width:768px){

.sticky-cta{
display:flex;
}

}

/* =========================
MOBILE
========================= */

@media (max-width:768px){

  .section {

    padding: 60px 0;

  }

  .hero-title {

    font-size: 32px;

  }

}
.testimonial {
  padding: 26px;
  background: #ffffff;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #333;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
}

.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}
.testimonial p::before {
  content: "“";
  font-size: 32px;
  color: #ff4d6d;
  margin-right: 6px;
  position: relative;
  top: 6px;
}
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.testimonial-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 600;
}

.testimonial-user img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.hero-trust{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
margin-top:18px;
font-size:14px;
}

.hero-trust span{
background:rgba(255,255,255,0.15);
padding:6px 12px;
border-radius:20px;
backdrop-filter:blur(4px);
}

/* Desktop */

@media(min-width:768px){

.hero-trust{
flex-direction:row;
justify-content:center;
gap:14px;
}

}

.hero-rating{
margin-top:22px;
text-align:center;
color:white;
opacity:.95;
}

.hero-rating .stars{
font-size:18px;
font-weight:600;
margin-bottom:4px;
}

.hero-rating .members{
font-size:14px;
opacity:.85;
}

.scroll-heart{
margin-top:30px;
font-size:22px;
animation:heartScroll 1.6s infinite;
}

@keyframes heartScroll{

0%{transform:translateY(0); opacity:.7;}
50%{transform:translateY(8px); opacity:1;}
100%{transform:translateY(0); opacity:.7;}

}

body{
overflow-x:hidden;
}

.footer{
position:relative;
z-index:2;
}

@media (max-width:768px){

.footer{
padding-bottom:120px;
}

}

@media (min-width: 768px){

#add-to-home,
.add-to-home,
.pwa-banner,
.install-banner{
display:none !important;
}

}