/* Core */
:root{
  --bg:#fdfdfd; --card:#f6f6f7; --muted:#6f7680;
  --accent:#bfa94c; --accent-silver:#c0c0c0; --diamond:#e0e7ff;
  --glass:rgba(255,255,255,.36); --shadow-weak:0 6px 18px rgba(0,0,0,.06);
  --radius:1.2rem; --radius-sm:.6rem; --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial;
  --trans:360ms;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);line-height:1.45;color:#1f2933;background:var(--bg);scroll-behavior:smooth}
.visually-hidden-focusable{position:absolute;left:-9999px}
.visually-hidden-focusable:focus{position:static;display:inline-block;padding:.5rem 1rem;background:var(--accent);color:#000;border-radius:.35rem;z-index:9999}

/* Nav */
.ff-nav{background:rgba(255,255,255,.72);backdrop-filter:blur(10px) saturate(120%);border-bottom:1px solid rgba(0,0,0,.04);box-shadow:var(--shadow-weak)}
.ff-logo-img{display:block;height:44px;width:auto;object-fit:contain;border-radius:8px}
.brand-text .brand-title{font-weight:900;color:var(--accent);letter-spacing:.01em}
.brand-sub{font-size:.78rem;color:var(--muted)}
.nav-link{color:#374151;transition:color var(--trans),text-shadow var(--trans);position:relative}
.nav-link:hover,.nav-link:focus{color:var(--accent);text-shadow:0 0 8px rgba(255,223,80,.12)}
.nav-link::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-silver));transition:width var(--trans)}
.nav-link:hover::after{width:100%}
.btn-round{border-radius:999px;padding:.45rem .9rem}
/* Hero */
.hero-section{padding:7rem 0 4rem;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(227,242,255,.01))}
.hero-canvas,.hero-parallax{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;z-index:0}
.hero-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,0,.22) 0%,rgba(192,192,192,.04) 70%);top:48%;left:66%;transform:translate(-50%,-50%);mix-blend-mode:screen;pointer-events:none;z-index:1;animation:heroGlow 5.5s infinite alternate ease-in-out}
@keyframes heroGlow{0%{transform:translate(-50%,-50%) scale(.95)}100%{transform:translate(-50%,-50%) scale(1.06)}}
.hero-content{position:relative;z-index:3}
.ff-headline{font-weight:900;font-size:2.6rem;line-height:1.03;margin:0 0 .6rem;background:linear-gradient(90deg,var(--accent-silver),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 10px rgba(255,255,255,.25)}
.ff-lead{font-size:1.12rem;color:#4b5563;margin-bottom:1.25rem}
.pill{display:inline-block;padding:.32rem .6rem;border-radius:999px;border:1px solid rgba(0,0,0,.06);color:var(--accent);font-size:.78rem;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.btn-cta{border-radius:999px;padding:.65rem 1.2rem;font-weight:800;background:linear-gradient(145deg,var(--accent),var(--accent-silver));color:#0b0b0b;border:none;box-shadow:0 6px 24px rgba(0,0,0,.10);transition:transform var(--trans),box-shadow var(--trans)}
.btn-ghost{background:transparent;border:1px solid rgba(0,0,0,.06);color:#374151;border-radius:999px;padding:.5rem .95rem}
.magnetic{position:relative;will-change:transform}

/* Parallax dots */
.hero-parallax-dot{position:absolute;border-radius:50%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));animation:floatY 6s ease-in-out infinite}
@keyframes floatY{0%{transform:translateY(-2px)}50%{transform:translateY(2px)}100%{transform:translateY(-2px)}}

/* Sections */
.section{padding:4rem 0}.section--compact{padding:3rem 0}
.section-title{font-weight:800;font-size:1.35rem;color:var(--accent);margin-bottom:.6rem}
.text-muted{color:var(--muted)}

/* Cards */
.ff-card{background:var(--card);border-radius:var(--radius);border:1px solid rgba(0,0,0,.04);box-shadow:var(--shadow-weak);transition:transform var(--trans),box-shadow var(--trans);overflow:hidden}
.ff-card .card-body{padding:1.25rem}
.ff-card.hover-raise:hover{transform:translateY(-6px);box-shadow:0 26px 70px rgba(0,0,0,.08)}
.gradient-border{position:relative}
.gradient-border::before{content:"";position:absolute;inset:-1px;border-radius:calc(var(--radius) + 2px);padding:1px;background:linear-gradient(135deg,var(--accent),#e7e7e7);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.45),rgba(255,255,255,.2));backdrop-filter:blur(10px)}

/* Portfolio */
.bg-contrast{background:linear-gradient(145deg,var(--diamond),rgba(255,255,255,.01))}
.link-plain{color:var(--accent);text-decoration:none;font-weight:700;transition:color var(--trans)}
.link-plain:hover{text-shadow:0 0 8px rgba(255,223,55,.16);text-decoration:underline}
.portfolio-item{perspective:1000px;transition:transform var(--trans),opacity var(--trans)}
.portfolio-item.ff-hidden{opacity:0;transform:scale(.92);pointer-events:none}
.tilt{transform-style:preserve-3d}
.svg-thumb svg{display:block;width:100%;height:auto}
.glow-card{position:relative}
.glow-card::after{content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;opacity:0;box-shadow:0 0 60px 10px rgba(191,169,76,.35);transition:opacity var(--trans)}
.glow-card:hover::after{opacity:1}

/* Prozess */
.process-card{position:relative;border-radius:1rem;background:linear-gradient(135deg,rgba(255,255,255,.02),rgba(192,192,192,.01));border:1px solid rgba(0,0,0,.04);padding:1.4rem;text-align:center;color:var(--accent);font-weight:800;transform:translateY(18px);opacity:0;transition:transform .52s cubic-bezier(.2,.9,.2,1),opacity .52s,box-shadow .52s;z-index:2}
.process-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 14px 38px rgba(0,0,0,.10)}
.process-card.ff-animated,.process-card.active{opacity:1;transform:translateY(0)}
.process-line{position:absolute;left:2.5rem;right:2.5rem;top:50%;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-silver));transform-origin:left center;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.9,.2,1);z-index:1}
.process-line.active{transform:scaleX(1)}

/* Forms */
.ff-input{background:var(--glass);border-radius:var(--radius-sm);padding:.65rem;border:1px solid rgba(0,0,0,.06);color:#222;transition:box-shadow var(--trans),transform var(--trans)}
.ff-input:focus{outline:none;border-color:var(--accent);box-shadow:0 6px 22px rgba(255,215,0,.12);transform:translateY(-2px)}

/* Headline split */
#heroHeadline{display:inline-block;line-height:1.05;white-space:nowrap;position:relative;z-index:3}
.hero-letter{display:inline-block;transform:translateY(18px);opacity:0;will-change:transform,opacity;font-weight:900;background:linear-gradient(90deg,var(--accent-silver),var(--accent),var(--diamond));-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .6s cubic-bezier(.2,.9,.2,1),opacity .6s ease}
.hero-letter.in{transform:translateY(0);opacity:1}
.hero-em{display:inline-block;padding:0 .12rem;border-radius:.18rem;position:relative}

/* Grain overlay */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.35'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Dots bullets (global helper) */
.bullets--dots{padding-left:1.1rem}
.bullets--dots li{position:relative;margin:.4rem 0}
.bullets--dots li::before{content:"•";position:absolute;left:-1.1rem;top:.05rem;font-size:1.05rem;line-height:1;color:var(--accent);font-weight:900}

/* Responsive */
@media (max-width:991.98px){.ff-headline{font-size:2rem}.hero-glow{width:360px;height:360px;left:52%}.process-line{left:1rem;right:1rem}.hero-section{padding-top:6rem}}

@media (max-width:575.98px){.ff-headline{font-size:1.6rem}.hero-glow{display:none}.hero-section{padding-top:5.2rem}}
/* ===== Preise Section ===== */
#preise {
  padding: 4rem 0;
  background: #fafafa;
}

.price-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #eee;
}

.price-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.price-title {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.price-old {
  text-decoration: line-through;
  color: #888;
  margin: 0.5rem 0;
}

.price-new {
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
}

.price-new span {
  color: #bfa94c; /* Gold-Akzent */
  font-size: 1.6rem;
  font-weight: 800;
}

.price-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  text-align: left;
  font-size: 0.95rem;
  color: #555;
}

.price-features li {
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.price-card.highlight {
  border: 2px solid #bfa94c;
  box-shadow: 0 8px 24px rgba(191,169,76,0.2);
}

.price-card.premium {
  background: linear-gradient(145deg, #fff, #fdfdfd);
  border: 2px solid #c0c0c0;
  box-shadow: 0 10px 28px rgba(0,0,0,0.15);
}
/* ===== CTA Button Preise ===== */
.btn-gold {
  background: #bfa94c;
  color: #fff;
  font-weight: 600;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 18px rgba(191,169,76,0.4);
}

.btn-gold:hover {
  background: #a8913d;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(191,169,76,0.6);
}






/* ===== Preise Section (scoped) ===== */
#preise { padding: 4rem 0; background: #fafafa; }

#preise .price-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #eee;
}
#preise .price-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

#preise .price-title { font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; }
#preise .price-old { text-decoration: line-through; color: #888; margin: 0.5rem 0; }
#preise .price-new { font-size: 1.4rem; font-weight: 600; color: #333; margin-bottom: 1rem; }
#preise .price-new span { color: #bfa94c; font-size: 1.6rem; font-weight: 800; }

#preise .price-features { list-style: none; padding: 0; margin: 1rem 0 0; text-align: left; font-size: 0.95rem; color: #555; }
#preise .price-features li { padding: 0.3rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }

#preise .price-card.highlight { border: 2px solid #bfa94c; box-shadow: 0 8px 24px rgba(191,169,76,0.2); }
#preise .price-card.premium { background: linear-gradient(145deg,#fff,#fdfdfd); border: 2px solid #c0c0c0; box-shadow: 0 10px 28px rgba(0,0,0,0.15); }

/* CTA Button im Preisbereich */
#preise .btn.btn-gold {
  background: #bfa94c;
  color: #fff;
  font-weight: 600;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 18px rgba(191,169,76,0.4);
}
#preise .btn.btn-gold:hover {
  background: #a8913d;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(191,169,76,0.6);
}

/* Standard: kein Goldrahmen */
#preise .price-card { border: 1px solid #eee; }

/* Highlight nur dezent ohne Gold – bis Hover */
#preise .price-card.highlight {
  border: 1px solid #eee;          /* statt Gold */
  box-shadow: 0 8px 24px rgba(0,0,0,0.10); /* leichte Betonung */
}

/* Goldrahmen NUR bei Hover (gilt für alle drei Karten) */
#preise .price-card:hover,
#preise .price-card.highlight:hover,
#preise .price-card.premium:hover {
  border: 2px solid #bfa94c;
  box-shadow: 0 12px 30px rgba(191,169,76,0.25);
  transform: translateY(-8px);
}
/* Hosting Dropdown im Preisbereich */
.price-dropdown {
  margin-top: 1rem;
  text-align: left;
}

.dropdown-label {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.3rem;
}

.price-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 0.9rem;
  color: #333;
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.price-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(191,169,76,0.3);
  outline: none;
}
/* Dropdown für Hosting */
.price-dropdown {
  margin-top: 1rem;
  text-align: left;
}

.dropdown-label {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.3rem;
}

.price-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 0.9rem;
  color: #333;
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.price-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(191,169,76,0.3);
  outline: none;
}