/* ============================================================
   AHRENS MARKETING — GLOBALES DESIGN
   Einfügen unter: Design -> Customizer -> Zusaetzliches CSS
   Nur EINE Quelle verwenden. Kein  in Gutenberg-Bloecken.
   Alle Klassen mit Praefix am- (kollidiert nicht mit OceanWP).
   ============================================================ */

/* ---------- 1. DESIGN-TOKENS ---------- */
:root{
  /* Farben */
  --am-bg:        #0d0f10;
  --am-bg-soft:   #16191b;
  --am-bg-card:   #1b1f21;
  --am-text:      #f2f2f0;
  --am-muted:     #a3a9ac;
  --am-accent:    #c8a24a;
  --am-accent-dk: #a8873a;
  --am-line:      rgba(255,255,255,.12);
  --am-ok:        #7bbf6a;

  /* Typografie */
  --am-font:  system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --am-fs-h1: clamp(2.2rem, 5.2vw, 4rem);
  --am-fs-h2: clamp(1.7rem, 3.4vw, 2.6rem);
  --am-fs-h3: clamp(1.2rem, 1.8vw, 1.5rem);
  --am-fs-body: clamp(1rem, 1.05vw, 1.125rem);
  --am-fs-small: .875rem;
  --am-lh: 1.65;

  /* Abstaende */
  --am-s1:.5rem;  --am-s2:1rem;   --am-s3:1.5rem;
  --am-s4:2.5rem; --am-s5:4rem;   --am-s6:6rem;

  /* Sonstiges */
  --am-radius: 14px;
  --am-radius-sm: 8px;
  --am-max: 1140px;
  --am-shadow: 0 18px 50px rgba(0,0,0,.45);
}

/* ---------- 2. GRUNDLAGEN ---------- */
.am-section{
  background: var(--am-bg);
  color: var(--am-text);
  font-family: var(--am-font);
  font-size: var(--am-fs-body);
  line-height: var(--am-lh);
  padding: var(--am-s6) var(--am-s3);
}
.am-section--soft{ background: var(--am-bg-soft); }
.am-section--tight{ padding-block: var(--am-s5); }

.am-container{
  max-width: var(--am-max);
  margin-inline: auto;
}
.am-container--narrow{ max-width: 760px; }

.am-section h1,
.am-section h2,
.am-section h3{
  color: var(--am-text);
  line-height: 1.15;
  margin: 0 0 var(--am-s2);
  font-weight: 700;
  letter-spacing: -.01em;
}
.am-section h1{ font-size: var(--am-fs-h1); }
.am-section h2{ font-size: var(--am-fs-h2); }
.am-section h3{ font-size: var(--am-fs-h3); }

.am-section p{ margin: 0 0 var(--am-s2); }
.am-section p:last-child{ margin-bottom: 0; }

.am-eyebrow{
  display: inline-block;
  font-size: var(--am-fs-small);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--am-accent);
  margin-bottom: var(--am-s2);
}
.am-lead{
  font-size: clamp(1.05rem,1.5vw,1.3rem);
  color: var(--am-muted);
  max-width: 62ch;
}
.am-muted{ color: var(--am-muted); }
.am-center{ text-align: center; }
.am-center .am-lead{ margin-inline: auto; }

/* ---------- 3. BUTTONS ---------- */
.am-btn{
  display: inline-block;
  padding: .9rem 1.9rem;
  border-radius: 999px;
  background: var(--am-accent);
  color: #14161a !important;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid var(--am-accent);
  transition: background .18s ease, transform .18s ease;
}
.am-btn:hover{ background: var(--am-accent-dk); transform: translateY(-1px); }
.am-btn--ghost{
  background: transparent;
  color: var(--am-text) !important;
  border-color: var(--am-line);
}
.am-btn--ghost:hover{ background: rgba(255,255,255,.06); }

.am-btnrow{
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-s2);
  margin-top: var(--am-s3);
}
.am-center .am-btnrow{ justify-content: center; }

/* ---------- 4. HERO ---------- */
.am-hero{
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding-block: var(--am-s6);
  overflow: hidden;
}
.am-hero__inner{ position: relative; z-index: 2; max-width: 780px; }
.am-hero__media{
  position: absolute; inset: 0; z-index: 1;
  object-fit: cover; width: 100%; height: 100%;
  opacity: .38;
}
.am-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, var(--am-bg) 12%, rgba(13,15,16,.55) 70%, rgba(13,15,16,.25));
}

/* ---------- 5. GRID + KARTEN ---------- */
.am-grid{ display: grid; gap: var(--am-s3); }
.am-grid--2{ grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
.am-grid--3{ grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); }
.am-grid--4{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }

.am-card{
  background: var(--am-bg-card);
  border: 1px solid var(--am-line);
  border-radius: var(--am-radius);
  padding: var(--am-s4) var(--am-s3);
}
.am-card--accent{ border-color: var(--am-accent); box-shadow: var(--am-shadow); }
.am-card h3{ margin-bottom: var(--am-s1); }
.am-card p{ color: var(--am-muted); }
.am-card__icon{
  width: 44px; height: 44px; margin-bottom: var(--am-s2);
  display: grid; place-items: center;
  border-radius: var(--am-radius-sm);
  background: rgba(200,162,74,.14);
  color: var(--am-accent); font-size: 1.3rem;
}

/* ---------- 6. ABLAUF / SCHRITTE ---------- */
.am-steps{ counter-reset: amstep; display: grid; gap: var(--am-s3); }
.am-step{
  position: relative;
  padding-left: 3.6rem;
  min-height: 2.6rem;
}
.am-step::before{
  counter-increment: amstep;
  content: counter(amstep);
  position: absolute; left: 0; top: 0;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--am-accent);
  color: var(--am-accent);
  font-weight: 700;
}
.am-step h3{ margin-bottom: .25rem; }
.am-step p{ color: var(--am-muted); }

/* ---------- 7. PREISE ---------- */
.am-price{
  background: var(--am-bg-card);
  border: 1px solid var(--am-line);
  border-radius: var(--am-radius);
  padding: var(--am-s4) var(--am-s3);
  display: flex; flex-direction: column;
}
.am-price--featured{
  border-color: var(--am-accent);
  box-shadow: var(--am-shadow);
  position: relative;
}
.am-price--featured::before{
  content: "Meistgewählt";
  position: absolute; top: -.8rem; left: var(--am-s3);
  background: var(--am-accent); color:#14161a;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .75rem; border-radius: 999px;
}
.am-price__name{ font-size: var(--am-fs-h3); font-weight: 700; }
.am-price__setup{ font-size: 2.1rem; font-weight: 700; color: var(--am-accent); margin-top: var(--am-s1); }
.am-price__month{ color: var(--am-muted); font-size: var(--am-fs-small); margin-bottom: var(--am-s3); }
.am-price ul{ list-style: none; margin: 0 0 var(--am-s3); padding: 0; }
.am-price li{
  padding: .45rem 0 .45rem 1.6rem; position: relative;
  border-bottom: 1px solid var(--am-line); color: var(--am-muted);
}
.am-price li:last-child{ border-bottom: 0; }
.am-price li::before{
  content: "✓"; position: absolute; left: 0; color: var(--am-ok); font-weight: 700;
}
.am-price .am-btn{ margin-top: auto; text-align: center; }

/* ---------- 8. FAQ ---------- */
.am-faq{ display: grid; gap: var(--am-s2); }
.am-faq details{
  background: var(--am-bg-card);
  border: 1px solid var(--am-line);
  border-radius: var(--am-radius-sm);
  padding: var(--am-s2) var(--am-s3);
}
.am-faq summary{
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: var(--am-s2);
}
.am-faq summary::-webkit-details-marker{ display:none; }
.am-faq summary::after{ content:"+"; color: var(--am-accent); font-size:1.4rem; line-height:1; }
.am-faq details[open] summary::after{ content:"–"; }
.am-faq details p{ margin-top: var(--am-s2); color: var(--am-muted); }

/* ---------- 9. ZAHLEN / KENNZAHLEN ---------- */
.am-stats{ display: grid; gap: var(--am-s3); grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); text-align:center; }
.am-stat__num{ font-size: clamp(2rem,4vw,3rem); font-weight: 700; color: var(--am-accent); line-height:1; }
.am-stat__label{ color: var(--am-muted); font-size: var(--am-fs-small); margin-top:.4rem; }

/* ---------- 10. SCROLL-CANVAS (Platzhalter) ---------- */
.am-scroll{ position: relative; height: 300vh; }
.am-scroll__sticky{ position: sticky; top:0; height:100vh; display:grid; place-items:center; }
.am-scroll__canvas{ width:100%; height:100%; object-fit:cover; }
.am-scroll__caption{
  position:absolute; left:0; right:0; bottom: 12vh; text-align:center;
  padding-inline: var(--am-s3);
}

/* ---------- 11. HILFSKLASSEN ---------- */
.am-mt0{ margin-top:0 !important; }
.am-mb0{ margin-bottom:0 !important; }
.am-hide{ display:none !important; }

/* ---------- 12. MOBIL ---------- */
@media (max-width: 782px){
  .am-section{ padding: var(--am-s5) var(--am-s2); }
  .am-hero{ min-height: 68vh; }
  .am-hero::after{
    background: linear-gradient(180deg, rgba(13,15,16,.55), var(--am-bg) 78%);
  }
  .am-btnrow .am-btn{ flex: 1 1 100%; text-align: center; }
}

/* ---------- 13. BEWEGUNG REDUZIEREN ---------- */
@media (prefers-reduced-motion: reduce){
  .am-btn{ transition: none; }
  .am-scroll{ height: auto; }
  .am-scroll__sticky{ position: static; height: auto; }
}