/*
 * base.css — Reset, Typografie, Utilities
 * ============================================================
 */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background: var(--white);
  color:       var(--text);
  font-family: var(--font-b);
  font-size:   15px;
  line-height: 1.6;
  overflow-x:  hidden;
}
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }



/* ── Scroll-Reveal ── */
.reveal {
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.vis {
  opacity:   1;
  transform: translateY(0);
}

/* ── Keyframes ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Buttons ── */
.btn-w {
  background:   var(--white);
  color:        var(--primary);
  padding:      13px 28px;
  border-radius:6px;
  font-weight:  600;
  font-size:    14px;
  letter-spacing:.3px;
  transition:   all .2s;
  box-shadow:   0 4px 20px rgba(0,0,0,.2);
  display:      inline-flex;
  align-items:  center;
}
.btn-w:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.3); }

.btn-o {
  border:       1.5px solid rgba(255,255,255,.35);
  color:        rgba(255,255,255,.85);
  padding:      13px 28px;
  border-radius:6px;
  font-weight:  500;
  font-size:    14px;
  letter-spacing:.3px;
  transition:   all .2s;
  display:      inline-flex;
  align-items:  center;
}
.btn-o:hover { border-color: rgba(255,255,255,.7); color: #fff; }

.btn-p {
  background:   var(--primary);
  color:        var(--white);
  padding:      13px 28px;
  border-radius:6px;
  font-weight:  600;
  font-size:    14px;
  letter-spacing:.3px;
  transition:   all .2s;
  display:      inline-flex;
  align-items:  center;
}
.btn-p:hover { background: var(--primary-l); transform: translateY(-1px); }

.btn-light {
  background:  var(--white);
  color:       var(--primary);
  padding:     13px 28px;
  border-radius:6px;
  font-weight: 600;
  font-size:   14px;
  letter-spacing:.3px;
  transition:  all .2s;
  box-shadow:  0 4px 20px rgba(0,0,0,.25);
  display:     inline-flex;
  align-items: center;
}
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.35); }

/* CTA-Bereich Buttons */
.btn-cta-w {
  background:   #fff;
  color:        var(--primary);
  padding:      13px 28px;
  border-radius:6px;
  font-weight:  700;
  font-size:    14px;
  letter-spacing:.3px;
  transition:   all .2s;
  box-shadow:   0 4px 20px rgba(0,0,0,.2);
}
.btn-cta-w:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.3); }

.btn-cta-o {
  border:       1.5px solid rgba(255,255,255,.4);
  color:        rgba(255,255,255,.9);
  padding:      13px 28px;
  border-radius:6px;
  font-weight:  500;
  font-size:    14px;
  letter-spacing:.3px;
  transition:   all .2s;
}
.btn-cta-o:hover { border-color: #fff; color: #fff; }

/* ── Section-Shared ── */
.section    { padding: 88px 48px; max-width: 1160px; margin: 0 auto; }
.eyebrow    {
  font-size:     11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:         var(--primary);
  font-weight:   600;
  margin-bottom: 8px;
}
.sh         { text-align: center; margin-bottom: 52px; }
.sh h2      {
  font-family:var(--font-h);
  font-size:  clamp(28px,3.5vw,46px);
  font-weight:800;
  line-height:1.1;
  color:      var(--text);
}
.sh p       {
  color:       var(--text-mid);
  margin-top:  12px;
  max-width:   500px;
  margin-left: auto;
  margin-right:auto;
  font-size:   15px;
  line-height: 1.7;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .section { padding: 60px 24px; }
}