/*
Theme Name:  Datesetzer
Theme URI:   https://datesetzer.de
Author:      Datesetzer GmbH
Description: Premium DaaS Landing Page — Brand Guide v1.0. Pixel-perfect Cormorant Garamond + Jost. Inkl. Control Panel.
Version:     4.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: datesetzer
*/

/* ══════════════════════════════════════════════
   BRAND TOKENS (exact from original HTML)
══════════════════════════════════════════════ */
:root {
  --ink:        #09080c;
  --black:      #09080c;
  --cream:      #f0e9da;
  --cream-dim:  #c8bfae;
  --gold:       #c9a84c;
  --gold-2:     #e8d08a;
  --gold-dim:   rgba(201,168,76,0.12);
  --gold-line:  rgba(201,168,76,0.22);
  --warm:       #1a1710;
  --gray:       #7a7265;
  --border:     rgba(240,233,218,0.07);
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Jost', system-ui, sans-serif;
}

/* ══════════════════════════════════════════════
   RESET
══════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--cream);
  /* CRITICAL: body uses display font, weight 300 — exact match to original */
  font-family:var(--ff-display);
  font-weight:300;
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--gold-dim);color:var(--cream)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ══════════════════════════════════════════════
   NAV — exact from original
══════════════════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:999;
  padding:22px 60px;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(9,8,12,0.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(200,168,75,0.1);
  transition:padding .3s,background .3s;
}
nav.scrolled{padding:14px 60px;background:rgba(9,8,12,.97)}

/* nav-logo: display font 22px weight 300 letter-spacing .5px */
.nav-logo{font-family:var(--ff-display);font-size:22px;font-weight:300;letter-spacing:.5px;color:var(--cream)}
.nav-logo em{color:var(--gold);font-style:italic}

/* nav-links: body font 11px letter-spacing 2.5px uppercase */
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{font-family:var(--ff-body);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gray);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--gold)}

/* nav-cta: body font 11px letter-spacing 2px uppercase */
.nav-cta{font-family:var(--ff-body);font-size:11px;letter-spacing:2px;text-transform:uppercase;background:none;border:1px solid var(--gold);color:var(--gold);padding:10px 22px;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block}
.nav-cta:hover{background:var(--gold);color:var(--black)}

.nav-hamburger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:4px}
.nav-hamburger span{display:block;width:22px;height:1px;background:var(--cream);transition:all .3s}

/* ══════════════════════════════════════════════
   HERO — exact from original
══════════════════════════════════════════════ */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:120px 40px 80px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 40%,#1a1205 0%,var(--black) 70%)}
.hero-ring{position:absolute;border-radius:50%;border:1px solid var(--gold-line);top:50%;left:50%;transform:translate(-50%,-50%)}
.hero-ring:nth-child(1){width:500px;height:500px;animation:breathe 7s ease-in-out infinite}
.hero-ring:nth-child(2){width:800px;height:800px;animation:breathe 7s ease-in-out infinite 1s;border-color:rgba(200,168,75,.1)}
.hero-ring:nth-child(3){width:1100px;height:1100px;animation:breathe 7s ease-in-out infinite 2s;border-color:rgba(200,168,75,.05)}
@keyframes breathe{0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
.hero-content{position:relative;z-index:1}

/* hero-eyebrow: body 9px weight 500 letter-spacing 5px uppercase */
.hero-eyebrow{font-family:var(--ff-body);font-size:9px;font-weight:500;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:28px;opacity:0;animation:fadeUp .8s ease .3s forwards;display:block}

/* hero-title: display font clamp(64px,11vw,130px) weight:normal (=300 for Cormorant) line-height .88 letter-spacing -1px */
.hero-title{font-family:var(--ff-display);font-size:clamp(64px,11vw,130px);font-weight:300;line-height:.88;letter-spacing:-1px;margin-bottom:36px;opacity:0;animation:fadeUp .8s ease .5s forwards;color:var(--cream)}
.hero-title em{color:var(--gold);font-style:italic}

/* hero-sub: body 15px weight 300 */
.hero-sub{font-family:var(--ff-body);font-size:15px;font-weight:300;color:var(--gray);line-height:1.85;max-width:520px;margin:0 auto 56px;opacity:0;animation:fadeUp .8s ease .7s forwards}
.hero-sub strong{color:var(--cream);font-weight:400}

.hero-actions{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .8s ease .9s forwards}

/* btn-primary: body 11px weight 600 letter-spacing 2.5px uppercase */
.btn-primary{font-family:var(--ff-body);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;background:var(--gold);color:var(--ink);border:none;padding:18px 40px;cursor:pointer;transition:all .25s;font-weight:600;display:inline-block}
.btn-primary:hover{background:#e0bb55;transform:translateY(-1px);color:var(--ink)}

/* btn-ghost: same */
.btn-ghost{font-family:var(--ff-body);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;background:none;color:var(--cream);border:1px solid rgba(240,233,218,.18);padding:18px 40px;cursor:pointer;transition:all .25s;display:inline-block}
.btn-ghost:hover{border-color:var(--cream)}

.hero-scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.4}
/* hero-scroll span: body 9px letter-spacing 3px uppercase */
.hero-scroll span{font-family:var(--ff-body);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gray)}
.hero-scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,var(--gold),transparent);animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%,100%{opacity:.3;transform:scaleY(1)}50%{opacity:1;transform:scaleY(.7)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════════ */
.stats-bar{border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);display:grid;grid-template-columns:repeat(4,1fr)}
.stat-block{padding:48px 40px;text-align:center;border-right:1px solid var(--gold-line)}
.stat-block:last-child{border:none}
/* stat-num: display 52px weight 300 */
.stat-num{font-family:var(--ff-display);font-size:52px;font-weight:300;color:var(--gold);display:block;margin-bottom:4px}
/* stat-label: body 10px weight 500 letter-spacing 3px uppercase */
.stat-label{font-family:var(--ff-body);font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--gray)}

/* ══════════════════════════════════════════════
   SHARED SECTION ELEMENTS
══════════════════════════════════════════════ */
/* section-tag: body 9px weight 500 letter-spacing 4px uppercase */
.section-tag{font-family:var(--ff-body);font-size:9px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:block}
/* section-title: display clamp(36px,5vw,62px) weight 300 */
.section-title{font-family:var(--ff-display);font-size:clamp(36px,5vw,62px);font-weight:300;line-height:1.05;margin-bottom:24px;color:var(--cream)}
.section-title em{color:var(--gold);font-style:italic}

/* ══════════════════════════════════════════════
   PROBLEM
══════════════════════════════════════════════ */
.problem{padding:140px 60px;max-width:1100px;margin:0 auto}
/* problem-lead: body 15px weight 300 */
.problem-lead{font-family:var(--ff-body);font-size:15px;font-weight:300;color:var(--gray);line-height:1.9;max-width:640px;margin-bottom:72px}
.problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--gold-line)}
.problem-card{background:var(--black);padding:48px 40px}
/* problem-num: display 72px weight:normal */
.problem-num{font-family:var(--ff-display);font-size:72px;font-weight:300;color:rgba(200,168,75,.08);line-height:1;margin-bottom:-20px;display:block}
/* problem h3: display 22px weight:normal */
.problem-card h3{font-family:var(--ff-display);font-size:22px;font-weight:300;color:var(--cream);margin-bottom:16px}
/* problem p: body 14px weight 300 */
.problem-card p{font-family:var(--ff-body);font-size:14px;font-weight:300;color:var(--gray);line-height:1.8}

/* ══════════════════════════════════════════════
   SOLUTION
══════════════════════════════════════════════ */
.solution{padding:140px 60px;background:var(--warm);position:relative;overflow:hidden}
.solution::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(200,168,75,.06) 0%,transparent 70%);pointer-events:none}
.solution-inner{max-width:1100px;margin:0 auto}
.solution-header{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:80px}
/* solution lead: body 15px weight 300 */
.solution-lead{font-family:var(--ff-body);font-size:15px;font-weight:300;color:var(--gray);line-height:1.9}
.solution-steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:80px 1fr;gap:32px;padding:36px 0;border-bottom:1px solid rgba(200,168,75,.1);align-items:start}
.step:last-child{border:none}
/* step-num: display 48px weight:normal */
.step-num{font-family:var(--ff-display);font-size:48px;font-weight:300;color:rgba(200,168,75,.25);line-height:1;text-align:right;padding-top:4px}
/* step h3: display 20px weight:normal */
.step-content h3{font-family:var(--ff-display);font-size:20px;font-weight:300;color:var(--cream);margin-bottom:10px}
/* step p: body 14px weight 300 */
.step-content p{font-family:var(--ff-body);font-size:14px;font-weight:300;color:var(--gray);line-height:1.8}
/* step-badge: body 9px weight 500 letter-spacing 2px uppercase */
.step-badge{display:inline-block;font-family:var(--ff-body);font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;border:1px solid var(--gold-line);color:var(--gold);padding:4px 10px;margin-top:12px}

/* ══════════════════════════════════════════════
   PAKETE
══════════════════════════════════════════════ */
.pakete{padding:140px 60px;max-width:1200px;margin:0 auto}
.pakete-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;background:var(--gold-line);margin-top:60px}
.paket{background:var(--black);padding:48px 36px;position:relative;transition:background .25s}
.paket.featured{background:#100e08}
/* paket-badge: body 9px letter-spacing 2px uppercase weight 600 */
.paket-badge{position:absolute;top:24px;right:24px;font-family:var(--ff-body);font-size:9px;letter-spacing:2px;text-transform:uppercase;background:var(--gold);color:var(--black);padding:5px 12px;font-weight:600}
/* paket-name: body 10px weight 500 letter-spacing 3px uppercase */
.paket-name{font-family:var(--ff-body);font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
/* paket-title: display 28px weight:normal */
.paket-title{font-family:var(--ff-display);font-size:28px;font-weight:300;color:var(--cream);margin-bottom:8px}
/* paket-subtitle: body 12px */
.paket-subtitle{font-family:var(--ff-body);font-size:12px;color:var(--gray);margin-bottom:36px;font-style:italic}
/* setup price: display 42px weight:normal */
.paket-price .setup{font-family:var(--ff-display);font-size:42px;font-weight:300;color:var(--gold)}
/* setup-label: body 11px */
.paket-price .setup-label{font-family:var(--ff-body);font-size:11px;color:var(--gray)}
/* paket-monthly: body 13px */
.paket-monthly{font-family:var(--ff-body);font-size:13px;color:var(--gray);margin-bottom:36px;margin-top:8px}
.paket-monthly strong{color:var(--cream)}
.paket-features{list-style:none;margin-bottom:40px}
/* features li: body 13px */
.paket-features li{font-family:var(--ff-body);font-size:13px;color:var(--gray);padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04);display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.paket-features li::before{content:'–';color:var(--gold);flex-shrink:0;margin-top:1px}
.paket-features li:last-child{border:none}
/* paket-cta: body 11px letter-spacing 2px uppercase weight 600 */
.paket-cta{width:100%;font-family:var(--ff-body);font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:14px;cursor:pointer;transition:all .2s;font-weight:600;display:block;text-align:center}
.paket-cta.ghost{background:none;border:1px solid var(--gold-line);color:var(--gold)}
.paket-cta.ghost:hover{border-color:var(--gold);background:var(--gold-dim)}
.paket-cta.solid{background:var(--gold);border:1px solid var(--gold);color:var(--black)}
.paket-cta.solid:hover{background:#e0bb55}

/* ══════════════════════════════════════════════
   PROZESS
══════════════════════════════════════════════ */
.prozess{padding:140px 60px;background:var(--warm)}
.prozess-inner{max-width:900px;margin:0 auto}
.prozess-steps{display:grid;gap:0;margin-top:60px}
.pstep{display:grid;grid-template-columns:48px 1fr;gap:36px;padding:48px 0;border-bottom:1px solid rgba(200,168,75,.08);position:relative}
.pstep:last-child{border:none}
/* pstep-dot: body 12px */
.pstep-dot{width:48px;height:48px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-body);font-size:12px;color:var(--gold);flex-shrink:0;position:relative;z-index:1;background:var(--warm)}
.pstep-line{position:absolute;left:23px;top:80px;bottom:-20px;width:1px;background:linear-gradient(to bottom,var(--gold-line),transparent)}
.pstep:last-child .pstep-line{display:none}
/* pstep h3: display 22px weight:normal */
.pstep-content h3{font-family:var(--ff-display);font-size:22px;font-weight:300;color:var(--cream);margin-bottom:12px;padding-top:10px}
/* pstep p: body 14px weight 300 */
.pstep-content p{font-family:var(--ff-body);font-size:14px;font-weight:300;color:var(--gray);line-height:1.85}

/* ══════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════ */
.testimonials{padding:140px 60px;max-width:1100px;margin:0 auto}
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--gold-line);margin-top:60px}
.testi{background:var(--black);padding:48px 40px}
/* testi-stars: 13px letter-spacing 2px */
.testi-stars{color:var(--gold);font-size:13px;margin-bottom:24px;letter-spacing:2px}
/* testi-quote: display 17px weight:normal line-height 1.75 italic */
.testi-quote{font-family:var(--ff-display);font-size:17px;font-weight:300;line-height:1.75;color:var(--cream);margin-bottom:36px;font-style:italic}
.testi-person{display:flex;align-items:center;gap:16px}
/* testi-avatar: body 13px */
.testi-avatar{width:44px;height:44px;border-radius:50%;background:var(--gold-dim);border:1px solid var(--gold-line);display:flex;align-items:center;justify-content:center;font-family:var(--ff-body);font-size:13px;color:var(--gold);font-weight:500;flex-shrink:0}
/* testi-name: body 13px weight 500 */
.testi-name{font-family:var(--ff-body);font-size:13px;color:var(--cream);font-weight:500}
/* testi-role: body 11px */
.testi-role{font-family:var(--ff-body);font-size:11px;color:var(--gray)}

/* ══════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════ */
.faq{padding:140px 60px;background:var(--warm)}
.faq-inner{max-width:800px;margin:0 auto}
.faq-list{margin-top:60px}
.faq-item{border-bottom:1px solid rgba(200,168,75,.1);overflow:hidden}
/* faq-q: display 18px weight 300 */
.faq-q{width:100%;background:none;border:none;color:var(--cream);font-family:var(--ff-display);font-size:18px;font-weight:300;text-align:left;padding:28px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq-icon{width:24px;height:24px;flex-shrink:0;border:1px solid var(--gold-line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:16px;transition:transform .3s;font-family:var(--ff-body);font-style:normal}
.faq-item.open .faq-icon{transform:rotate(45deg)}
/* faq-a: body 14px weight 300 */
.faq-a{font-family:var(--ff-body);font-size:14px;font-weight:300;color:var(--gray);line-height:1.9;max-height:0;overflow:hidden;transition:max-height .4s ease,padding-bottom .4s ease;padding-bottom:0}
.faq-item.open .faq-a{max-height:300px;padding-bottom:28px}

/* ══════════════════════════════════════════════
   CTA
══════════════════════════════════════════════ */
.cta-section{padding:160px 60px;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,#1a1205 0%,var(--black) 70%)}
.cta-inner{position:relative;z-index:1}
/* cta-tag: body 9px weight 500 letter-spacing 5px uppercase */
.cta-tag{font-family:var(--ff-body);font-size:9px;font-weight:500;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:24px;display:block}
/* cta-title: display clamp(36px,6vw,72px) weight:normal */
.cta-title{font-family:var(--ff-display);font-size:clamp(36px,6vw,72px);font-weight:300;line-height:1.05;margin-bottom:20px;color:var(--cream)}
.cta-title em{color:var(--gold);font-style:italic}
/* cta-note: body 13px weight 300 */
.cta-note{font-family:var(--ff-body);font-size:13px;font-weight:300;color:var(--gray);margin-bottom:56px;line-height:1.8}
.cta-note strong{color:var(--cream);display:block;font-size:15px;margin-bottom:4px;font-weight:400}
.cta-form{display:flex;max-width:480px;margin:0 auto}
/* cta-input: body 14px */
.cta-input{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--gold-line);border-right:none;color:var(--cream);font-family:var(--ff-body);font-size:14px;padding:16px 22px;outline:none;transition:border-color .2s}
.cta-input::placeholder{color:var(--gray)}
.cta-input:focus{border-color:rgba(200,168,75,.4)}
/* cta-submit: body 11px weight 600 letter-spacing 2px uppercase */
.cta-submit{font-family:var(--ff-body);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;background:var(--gold);color:var(--black);border:1px solid var(--gold);padding:16px 28px;cursor:pointer;transition:background .2s;white-space:nowrap}
.cta-submit:hover{background:#e0bb55}
/* cta-privacy: body 11px */
.cta-privacy{font-family:var(--ff-body);font-size:11px;color:rgba(106,100,96,.6);margin-top:16px}
#ds-form-msg{min-height:18px;margin-top:8px;font-family:var(--ff-body);font-size:12px;transition:color .2s}

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
footer{padding:60px;border-top:1px solid rgba(200,168,75,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
/* footer-logo: display 18px weight 300 */
.footer-logo{font-family:var(--ff-display);font-size:18px;font-weight:300;color:var(--cream)}
.footer-logo em{color:var(--gold);font-style:italic}
.footer-links{display:flex;gap:28px;list-style:none}
/* footer-links a: body 11px letter-spacing 1.5px */
.footer-links a{font-family:var(--ff-body);font-size:11px;letter-spacing:1.5px;color:var(--gray);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--gold)}
/* footer-copy: body 11px */
.footer-copy{font-family:var(--ff-body);font-size:11px;color:rgba(106,100,96,.5)}

/* ══════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════ */
.ds-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.ds-reveal.in{opacity:1;transform:translateY(0)}

/* ══════════════════════════════════════════════
   WP ADMIN BAR OFFSET
══════════════════════════════════════════════ */
.admin-bar nav{top:32px}
@media screen and (max-width:782px){.admin-bar nav{top:46px}}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media(max-width:900px){
  nav{padding:18px 28px}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  nav.mobile-open .nav-links{display:flex;flex-direction:column;position:fixed;top:56px;left:0;right:0;background:rgba(9,8,12,.98);padding:32px;gap:24px;border-bottom:1px solid var(--gold-line);z-index:998}
  .problem,.pakete,.testimonials,.cta-section,.faq{padding:80px 28px}
  .solution,.prozess{padding:80px 28px}
  .solution-header{grid-template-columns:1fr;gap:40px}
  .pakete-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .stats-bar{grid-template-columns:1fr 1fr}
  .cta-form{flex-direction:column}
  .cta-input{border-right:1px solid var(--gold-line);border-bottom:none}
  footer{flex-direction:column;text-align:center;padding:40px 28px}
}
@media(max-width:480px){
  .hero-title{font-size:clamp(48px,14vw,80px)}
  .stats-bar{grid-template-columns:1fr}
  .stat-block{border-right:none;border-bottom:1px solid var(--gold-line)}
}