/* =========================================================
   Basis & Variablen
   ========================================================= */
:root {
  --bg:        #000000;
  --fg:        #ffffff;
  --accent:    #d4af37;
  --glass:     rgba(255,255,255,0.04);
  --radius:    16px;
  font-family: 'Inter', sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* =========================================================
   Parallax-Layer (Hintergrund)
   ========================================================= */
#parallax .layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .06;
  z-index: -1;
}
#parallax .layer:nth-child(1) {background: radial-gradient(circle at center, var(--accent) 30%, transparent 70%);}
#parallax .layer:nth-child(2) {background: linear-gradient(135deg, rgba(212,175,55,.13), transparent);}
#parallax .layer:nth-child(3) {background: url('https://picsum.photos/seed/pattern/1200/800'); background-size: cover; mix-blend-mode: overlay;}
#parallax .layer:nth-child(4) {background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 60%);}

/* =========================================================
   Sektionen
   ========================================================= */
.section {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  width: min(90%, 900px);
  margin: 0 auto;
  row-gap: 20px;
}

.reveal       {opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease;}
.reveal.show  {opacity: 1; transform: none;}

/* =========================================================
   Navigation
   ========================================================= */
nav {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}
nav ul {
  margin: 0;
  padding: 8px 24px;
  list-style: none;
  display: flex;
  gap: 24px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
}
nav a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
}
@media (max-width: 700px) {
  nav ul {gap: 12px;}
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  width: 100%;
  align-items: center;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin: 0 0 10px;
}
.subtitle {
  font-size: 1.2rem;
  opacity: .8;
  margin: 0 0 10px;
}
.claim {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 20px;
}
.typing {
  font-size: 1.3rem;
  border-right: 2px solid var(--accent);
  white-space: nowrap;
  overflow: hidden;
  animation: caret 1s step-end infinite;
}
@keyframes caret {50% {border-color: transparent;}}

.cta {
  margin-top: 24px;
  padding: 12px 28px;
  background: var(--accent);
  color: #000;
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.cta.shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shine 2s infinite;
}

@keyframes shine {to {left: 100%;}}

/* =========================================================
   Karten (Leistungen)
   ========================================================= */
.cards {
  width: 100%;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.card {
  background: var(--glass);
  border-radius: var(--radius);
  padding: 40px 20px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  transform-style: preserve-3d;
}
details.card summary::-webkit-details-marker{display:none}
details.card summary{font-weight:600;}
details.card[open]{box-shadow:0 0 18px var(--accent);}
details.card p{margin-top:14px;}
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 18px var(--accent), 0 0 30px var(--accent);
}

/* =========================================================
   Preise
   ========================================================= */
.price-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.price {
  background: var(--glass);
  border-radius: var(--radius);
  padding: 30px 20px;
  width: 260px;
  text-align: center;
}
.price.highlight {
  box-shadow: 0 0 15px var(--accent);
}
.amount {
  font-size: 2rem;
  font-weight: 600;
  margin: 10px 0 18px;
}
.amount small {font-size: .7rem;}
.price ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub {margin-top: 60px;}
.option-table {
  margin: 20px auto 0;
  border-collapse: collapse;
}
.option-table td {
  padding: 8px 16px;
  border-bottom: 1px solid var(--glass);
}
.hint {color: var(--accent); font-size: .8rem;}

/* =========================================================
   References Slider
   ========================================================= */
.slider {
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  margin: 40px auto 0;
}
.slides {
  display: flex;
  transition: transform .6s ease;
}
.slide {
  min-width: 100%;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  font-style: italic;
}

/* =========================================================
   Live-Build Browser-Demo
   ========================================================= */
.browser {
  position: relative;
  width: 80%;
  max-width: 800px;
  height: 450px;
  background: #111;
  border-radius: var(--radius);
  overflow: hidden;
}
.address-bar {height: 40px; background: #222;}
.page {
  position: absolute;
  top: 40px; left: 0;
  width: 100%; height: calc(100% - 40px);
  opacity: 0;
}
.stage1 {background: #1e1e1e; animation: fade 1s 1s forwards;}
.stage2 {background: #2e2e2e; animation: fade 1s 2s forwards;}
.stage3 {background: #3e3e3e; animation: fade 1s 3s forwards;}
@keyframes fade {to {opacity: 1;}}

/* =========================================================
   Formular
   ========================================================= */
form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 90%;
  max-width: 500px;
}
input, textarea, select, button {
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
}
textarea {min-height: 120px;}
button {
  background: var(--accent);
  color: #000;
  font-weight: 600;
  cursor: pointer;
}

/* =========================================================
   Footer
   ========================================================= */
footer {
  padding: 30px 20px;
  font-size: .9rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer-links a + a {margin-left:12px;}
.footer-social a {margin-left:12px;}

/* =========================================================
   Partikel-Canvas
   ========================================================= */
#particles {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* =========================================================
   Responsive Tweaks
   ========================================================= */
@media (max-width: 700px) {
  .cards {grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));}
  .price {width: 90%;}
  .section {padding: 30px 10px;}
}

.gpt-widget input {width:100%;max-width:500px;padding:12px;border-radius:var(--radius);border:none;font-family:inherit}
#suggestion       {margin-top:14px;opacity:.8;font-style:italic}