/* ============================================================
   marketingRAUM. — go.marketingraum.at  |  main.css
   ============================================================ */

/* ── FONTS ── */
@font-face { font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-garamond/CormorantGaramond-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-garamond/CormorantGaramond-LightItalic.woff2') format('woff2'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-garamond/CormorantGaramond-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-garamond/CormorantGaramond-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-garamond/CormorantGaramond-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('../fonts/barlow/Barlow-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('../fonts/barlow/Barlow-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('../fonts/barlow/Barlow-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('../fonts/barlow/Barlow-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ── TOKENS ── */
:root {
  --moos:       #3d5c44;
  --moos-dark:  #2a3f2f;
  --moos-light: #e8ede9;
  --moos-mid:   #6b8a72;
  --sand:       #f0ebe3;
  --sand-dark:  #ddd5c8;
  --ink:        #1a1a18;
  --ink-soft:   #4a4a45;
  --ink-muted:  #8a8a84;
  --cream:      #faf8f4;
  --white:      #ffffff;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Barlow', system-ui, sans-serif;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── BASE ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-sans); font-weight:400; background:var(--cream); color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }

/* ── KEYFRAMES ── */
@keyframes pulse-ring {
  0%   { transform:scale(1);    opacity:.55; }
  65%  { transform:scale(1.6);  opacity:0; }
  100% { transform:scale(1.6);  opacity:0; }
}
@keyframes pulse-core {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.08); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes slideRight {
  from { transform:scaleX(0); }
  to   { transform:scaleX(1); }
}
@keyframes shimmer {
  from { left:-100%; }
  to   { left:150%; }
}

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.reveal.visible { opacity:1; transform:none; }

/* ── NAVIGATION ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 4rem;
  background:rgba(250,248,244,.95);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(61,92,68,.1);
  transition:padding .3s var(--ease-out), box-shadow .3s;
}
nav.scrolled { padding:.85rem 4rem; box-shadow:0 1px 20px rgba(0,0,0,.06); }
.nav-logo img { height:36px; width:auto; }
.nav-logo { transition:opacity .2s; }
.nav-logo:hover { opacity:.75; }
.nav-cta {
  display:inline-block; padding:.55rem 1.5rem;
  background:var(--moos); color:var(--white); text-decoration:none;
  font-size:.78rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  transition:background .2s, transform .15s;
}
.nav-cta:hover { background:var(--moos-dark); transform:translateY(-1px); }

/* ── HERO ── */
.hero { position:relative; min-height:100vh; padding-top:80px; overflow:hidden; }

.hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-texture-img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-texture-overlay { position:absolute; inset:0; background:rgba(250,248,244,.72); }

.hero-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:4rem;
  padding:4rem; min-height:calc(100vh - 80px);
}

.eyebrow {
  display:inline-flex; align-items:center;
  font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--moos); margin-bottom:1.5rem;
}


.hero h1 {
  font-family:var(--font-serif); font-size:clamp(3.2rem,6vw,5.5rem);
  font-weight:300; line-height:1.05; letter-spacing:-.02em; color:#F8F6F3; margin-bottom:1.5rem;
}
.hero h1 em { font-style:italic; color:var(--moos); }

.hero-sub { font-size:1rem; font-weight:300; color:var(--ink-soft); line-height:1.75; max-width:420px; margin-bottom:2.5rem; }

.hero-actions { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-block; padding:.9rem 2rem;
  background:var(--moos); color:var(--white); text-decoration:none;
  font-family:var(--font-sans); font-size:.8rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; border:none; cursor:pointer;
  transition:background .2s, transform .15s, box-shadow .2s;
}
.btn-primary:hover { background:var(--moos-dark); transform:translateY(-2px); box-shadow:0 8px 20px rgba(42,63,47,.25); }
.btn-primary:active { transform:translateY(0); }
.btn-full { width:100%; text-align:center; display:block; }

.btn-ghost {
  font-size:.82rem; font-weight:400; color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid rgba(74,74,69,.4); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.btn-ghost:hover { color:var(--moos); border-color:var(--moos); }

/* ── PRICE CARD ── */
.price-card {
  position:relative;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 4px 32px rgba(0,0,0,.07);
  border:none; padding:2.5rem;
}
.price-card:hover { animation:none; }

.price-card-wrap { position: relative; }

.card-badge {
  position: absolute;
  top: -1.4rem;
  right: 1.5rem;
  background: var(--moos);
  color: var(--white);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .65rem 2rem;
  text-align: center;
  z-index: 2;
}

.price-block { display:flex; align-items:flex-start; gap:1.25rem; margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--sand-dark); }
.price-old { font-family:var(--font-serif); font-size:2rem; font-weight:300; color:var(--sand-dark); text-decoration:line-through; line-height:1; padding-top:.3rem; }
.price-new { font-family:var(--font-serif); font-size:3.8rem; font-weight:600; color:var(--moos-dark); line-height:1; }
.price-label { font-size:.7rem; font-weight:400; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.1em; margin-top:.3rem; }

.slots-bar { margin-bottom:1.5rem; }
.slots-text { display:flex; justify-content:space-between; font-size:.75rem; color:var(--ink-soft); margin-bottom:.5rem; }
.slots-text strong { color:var(--moos); font-weight:600; }
.bar-bg { height:3px; background:var(--sand-dark); border-radius:2px; overflow:hidden; }
.bar-fill { height:100%; width:0; background:var(--moos); border-radius:2px; transition:width 1s var(--ease-out); }

.card-features { list-style:none; display:flex; flex-direction:column; gap:.65rem; margin-bottom:2rem; }
.card-features li { display:flex; align-items:flex-start; gap:.75rem; font-size:.88rem; font-weight:300; color:var(--ink-soft); line-height:1.4; }
.card-features li::before { content:'✓'; color:var(--moos); font-weight:600; flex-shrink:0; margin-top:1px; font-size:.8rem; }

/* ── TRUST BAR ── */
.trust-bar {
  background:var(--moos); padding:1.1rem 4rem;
  display:flex; align-items:center; justify-content:center; gap:2.5rem; flex-wrap:wrap;
}
.trust-bar span {
  color:rgba(255,255,255,.8); font-size:.75rem; font-weight:400;
  letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; gap:.6rem;
  opacity:0; transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease;
}
.trust-bar span.visible { opacity:1; transform:none; }
.trust-bar span:first-child::before { display:none; }
.trust-bar span::before { content:''; display:inline-block; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.4); flex-shrink:0; }

/* ── SECTIONS ── */
.section { padding:6rem 4rem; }
.section-alt { background:var(--sand); }
.section-inner { max-width:1100px; margin:0 auto; }

.section-label {
  display:flex; align-items:center; gap:.6rem;
  font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--moos); margin-bottom:1rem;
}
.section-label::before { content:''; display:inline-block; width:2rem; height:1px; background:var(--moos); flex-shrink:0; }

.section h2 {
  font-family:var(--font-serif); font-size:clamp(2.4rem,4vw,3.4rem);
  font-weight:300; line-height:1.1; color:var(--ink);
  margin-bottom:1rem; max-width:600px; letter-spacing:-.01em;
}
.section h2 em { font-style:italic; color:var(--moos); }

.section-intro { font-size:.98rem; font-weight:300; color:var(--ink-soft); line-height:1.75; max-width:520px; margin-bottom:3.5rem; }

/* ── DELIVERABLES — moosgrüner Hintergrund ── */
.section#leistungen { background:var(--moos-dark); }
.section#leistungen .section-label { color:rgba(255,255,255,.5); }
.section#leistungen .section-label::before { background:rgba(255,255,255,.3); }
.section#leistungen h2 { color:var(--white); }
.section#leistungen h2 em { color:var(--moos-mid); }
.section#leistungen .section-intro { color:rgba(255,255,255,.6); }

.deliverables {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08);
}

.deliverable {
  background:rgba(255,255,255,.05);
  padding:2rem 1.75rem;
  position:relative; overflow:hidden;
  opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out),
              background .25s, box-shadow .25s;
}
.deliverable.visible { opacity:1; transform:none; }

/* Shimmer on hover */
.deliverable::before {
  content:''; position:absolute; top:0; left:-100%;
  width:60%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transition:left .6s var(--ease-out);
}
.deliverable:hover::before { left:140%; }
.deliverable:hover { background:rgba(255,255,255,.1); transform:translateY(-3px) !important; box-shadow:0 12px 32px rgba(0,0,0,.2); }

.del-num { display:block; font-family:var(--font-serif); font-size:3rem; font-weight:300; color:rgba(255,255,255,.12); line-height:1; margin-bottom:.75rem; }
.deliverable h3 { font-size:.88rem; font-weight:500; color:var(--white); margin-bottom:.5rem; }
.deliverable p { font-size:.82rem; font-weight:300; color:rgba(255,255,255,.6); line-height:1.6; }

/* ── PROCESS ── */
.process-steps {
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr);
  position:relative; padding:0;
}
.process-steps::before {
  content:''; position:absolute; top:1.4rem; left:12.5%; right:12.5%;
  height:1px; background:rgba(255,255,255,.15);
}
.section-alt .process-steps::before { background:var(--sand-dark); }

.process-step { padding:0 1.25rem; text-align:center; position:relative; }

.step-dot {
  width:2.8rem; height:2.8rem; border-radius:50%;
  background:var(--sand); border:1.5px solid var(--moos);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:1.1rem; font-weight:400; color:var(--moos);
  margin:0 auto 1.25rem; position:relative; z-index:1;
  animation:pulse-core 3s ease-in-out infinite;
}
.step-dot::after {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid var(--moos); opacity:.5;
  animation:pulse-ring 3s ease-out infinite;
}

.process-step:nth-child(1) .step-dot,
.process-step:nth-child(1) .step-dot::after { animation-delay:0s; }
.process-step:nth-child(2) .step-dot,
.process-step:nth-child(2) .step-dot::after { animation-delay:.75s; }
.process-step:nth-child(3) .step-dot,
.process-step:nth-child(3) .step-dot::after { animation-delay:1.5s; }
.process-step:nth-child(4) .step-dot,
.process-step:nth-child(4) .step-dot::after { animation-delay:2.25s; }

.process-step h3 { font-size:.88rem; font-weight:500; color:var(--ink); margin-bottom:.4rem; }
.process-step p { font-size:.8rem; font-weight:300; color:var(--ink-soft); line-height:1.6; }

/* ── FOR WHOM ── */
.for-whom-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }

.for-whom-list { list-style:none; display:flex; flex-direction:column; gap:.75rem; padding:0; }
.for-whom-list li {
  padding:1rem 1.25rem; background:var(--white);
  border-left:2px solid var(--moos);
  font-size:.88rem; font-weight:300; color:var(--ink-soft); line-height:1.55;
  transition:background .2s, transform .2s var(--ease-out), border-color .2s;
}
.for-whom-list li:hover { background:var(--moos-light); transform:translateX(4px); border-left-color:var(--moos-dark); }
.for-whom-list li strong { display:block; font-size:.85rem; font-weight:500; color:var(--ink); margin-bottom:.2rem; }

.not-for { margin-top:2rem; padding:1.25rem 1.5rem; border:1px solid var(--sand-dark); background:var(--sand); }
.not-for-title { font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-muted); margin-bottom:.6rem; }
.not-for p { font-size:.84rem; font-weight:300; color:var(--ink-soft); line-height:1.65; }

/* ── TESTIMONIALS ── */
.testimonials-section { padding:6rem 4rem; background:var(--cream); }
.testimonials-inner { max-width:1100px; margin:0 auto; }

.testimonials-header { margin-bottom:4rem; }
.testimonials-header .section-label { display:flex; align-items:center; gap:.6rem; font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--moos); margin-bottom:1rem; }
.testimonials-header .section-label::before { content:''; display:inline-block; width:2rem; height:1px; background:var(--moos); flex-shrink:0; }
.testimonials-header h2 { font-family:var(--font-serif); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:300; line-height:1.1; color:var(--ink); letter-spacing:-.01em; }
.testimonials-header h2 em { font-style:italic; color:var(--moos); }

.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:stretch; }

.t-card {
  display:flex; flex-direction:column; gap:1.25rem;
  padding:2.25rem 2rem; background:var(--white);
  border:2px solid var(--moos); border-radius:8px;
  opacity:0; transform:translateY(30px);
  transition:opacity .65s var(--ease-out), transform .65s var(--ease-out), box-shadow .3s;
}
.t-card.visible { opacity:1; transform:translateY(0); }
.t-card:nth-child(1) { transition-delay:0s; }
.t-card:nth-child(2) { transition-delay:.15s; }
.t-card:nth-child(3) { transition-delay:.3s; }
.t-card:hover { box-shadow:0 16px 48px rgba(42,63,47,.14); transform:translateY(-6px) !important; }

.t-icon-wrap { color:var(--moos); opacity:.25; line-height:0; }
.t-icon-wrap svg { width:28px; height:auto; }

.t-text { font-size:.93rem; font-weight:300; line-height:1.8; color:var(--ink-soft); flex-grow:1; margin:0; }

.t-author { display:flex; align-items:center; gap:.85rem; padding-top:1.25rem; border-top:1px solid var(--moos-light); margin-top:auto; }

.t-avatar {
  width:2.75rem; height:2.75rem; border-radius:50%; flex-shrink:0;
  background:var(--moos-light); border:1.5px solid rgba(61,92,68,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:500; color:var(--moos-dark); letter-spacing:.06em;
}

.t-meta { display:flex; flex-direction:column; gap:.15rem; }
.t-name { font-size:.8rem; font-weight:500; color:var(--ink); text-transform:uppercase; letter-spacing:.07em; display:block; }
.t-role { font-size:.75rem; font-weight:300; color:var(--moos); display:block; }

/* ── FORM SECTION ── */
.form-section { background:var(--sand); padding:6rem 4rem; }
.form-inner { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }

.form-left .section-label { color:var(--moos); }
.form-left .section-label::before { background:var(--moos); }
.form-left h2 { font-family:var(--font-serif); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:300; line-height:1.1; color:var(--ink); max-width:340px; letter-spacing:-.01em; margin-bottom:1rem; }
.form-left h2 em { font-style:italic; color:var(--moos); }
.form-intro { font-size:.95rem; font-weight:300; color:var(--ink-soft); line-height:1.75; margin-bottom:1.5rem; }
.urgency { font-size:.82rem; font-weight:300; color:var(--ink-muted); display:flex; align-items:center; gap:.5rem; }
.urgency strong { color:var(--moos-dark); font-weight:500; }

form { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; }
.form-group--full { grid-column:1/-1; }

label { font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:.35rem; }
label span { color:var(--ink-muted); }

input[type="text"], input[type="email"], textarea, select {
  width:100%; background:var(--white); border:1.5px solid var(--sand-dark);
  color:var(--ink); padding:.75rem 1rem;
  font-family:var(--font-sans); font-size:.9rem; font-weight:300;
  outline:none; -webkit-appearance:none; appearance:none; border-radius:0;
  transition:border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color:var(--sand-dark); }
input:focus, textarea:focus, select:focus { border-color:var(--moos); box-shadow:0 0 0 3px rgba(61,92,68,.1); }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible { outline:2px solid var(--moos); outline-offset:2px; }

select {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b8a72' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem;
}
select option { background:var(--white); color:var(--ink); }
textarea { resize:vertical; min-height:100px; }

altcha-widget {
  --altcha-border-color:var(--sand-dark); --altcha-border-radius:0;
  --altcha-color-base:var(--white); --altcha-color-text:var(--ink-soft);
  --altcha-color-border-focus:var(--moos); --altcha-color-footer-bg:var(--sand);
  --altcha-color-footer-text:var(--ink-muted); --altcha-font-family:var(--font-sans);
}

.btn-submit {
  width:100%; padding:1rem 2rem; background:var(--moos); color:var(--white); border:none;
  font-family:var(--font-sans); font-size:.8rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  transition:background .2s, transform .15s, box-shadow .2s;
}
.btn-submit:hover:not(:disabled) { background:var(--moos-dark); transform:translateY(-2px); box-shadow:0 8px 20px rgba(42,63,47,.25); }
.btn-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; }

.spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:var(--white); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }

#form-message { padding:.85rem 1rem; font-size:.85rem; font-weight:400; text-align:center; }
#form-message.success { background:rgba(61,92,68,.1); color:var(--moos-dark); border:1px solid rgba(61,92,68,.25); }
#form-message.error { background:rgba(180,60,60,.08); color:#7a2020; border:1px solid rgba(180,60,60,.2); }
.form-note { font-size:.72rem; font-weight:300; color:var(--ink-muted); text-align:center; grid-column:1/-1; }

/* ── FOOTER ── */
footer { background: #33443d; padding: 2.5rem 4rem; }
.footer-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.footer-logo img { height:28px; width:auto; opacity:.99; }
.footer-links { display:flex; gap:2rem; }
.footer-links a { font-size:.78rem; font-weight:400; color:rgba(255,255,255,.6); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--white); }
.footer-copy { font-size:.75rem; font-weight:300; color:rgba(255,255,255,.6); }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .hero-inner { gap:2.5rem; padding:3rem 2.5rem; }
  .deliverables { grid-template-columns:repeat(2,1fr); }
  .testimonials-grid { grid-template-columns:1fr 1fr; gap:1rem; }
}
@media (max-width:900px) {
  nav { padding:1rem 1.5rem; }
  nav.scrolled { padding:.75rem 1.5rem; }
  .hero { padding-top:72px; }
  .hero-texture-overlay { background:rgba(250,248,244,.82); }
  .hero-inner { grid-template-columns:1fr; padding:3rem 1.5rem 2rem; min-height:auto; gap:3rem; }
  .section, .form-section, .testimonials-section { padding:4rem 1.5rem; }
  .trust-bar { padding:1rem 1.5rem; gap:1rem; }
  .process-steps { grid-template-columns:1fr 1fr; gap:2rem; }
  .process-steps::before { display:none; }
  .for-whom-grid { grid-template-columns:1fr; gap:2.5rem; }
  .testimonials-grid { grid-template-columns:1fr; gap:1rem; }
  .t-card--center { margin-top:0; }
  .t-card--center.visible { transform:translateY(0); }
  .t-card--center:hover { transform:translateY(-5px) !important; }
  .form-inner { grid-template-columns:1fr; gap:2.5rem; }
  form { grid-template-columns:1fr; }
  .form-group--full { grid-column:1; }
  .footer-inner { flex-direction:column; text-align:center; gap:1rem; }
}
@media (max-width:600px) {
  .hero h1 { font-size:2.4rem; }
  .deliverables { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; }
  .trust-bar span { font-size:.68rem; }
}

/* ── HERO TITLE — Word-by-Word Reveal (Framer-Style) ── */
@keyframes wordReveal {
  from {
    opacity: 0;
    transform: translateY(0.45em) skewY(2deg);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewY(0deg);
    filter: blur(0);
  }
}

.hero-title { overflow: visible; }

.hero-title .word {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity, filter;
}

.hero-title .word.animated {
  animation: wordReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* em-Wörter behalten die italic-Farbe */
.hero-title em .word { color: var(--moos); font-style: italic; }

/* Zeilenumbrüche im Split-Modus */
.hero-title .line-break { display: block; height: 0; width: 100%; }

/* ============================================================
   HERO SPOTLIGHT — Update 4
   Farben: #33443D (dunkel), #53685F (mittel), #F8F6F3 (hell)
   ============================================================ */

/* ── NAV auf dunklem Hero ── */
nav {
  background: rgba(51, 68, 61, 0.85) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
nav.scrolled {
  background: rgba(51, 68, 61, 0.97) !important;
}
.nav-cta {
  background: #F8F6F3 !important;
  color: #33443D !important;
}
.nav-cta:hover {
  background: #ddd8d0 !important;
}

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 100vh;
  background: #33443D;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 0;
}

/* Canvas für Fluid-Blob-Hintergrund */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .55;
}

/* Spotlight-Overlay */
.hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle 280px at var(--mx, 50%) var(--my, 40%),
    rgba(248, 246, 243, 0.13) 0%,
    rgba(248, 246, 243, 0.04) 40%,
    transparent 70%
  );
  transition: background 0.05s linear;
}

/* Hero inner */
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 120px 6rem 5rem;
}

.hero-content {
  max-width: 860px;
  text-align: center;
  margin: 0 auto;
}

/* Eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(248, 246, 243, .8);
  margin-bottom: 2rem;
}


/* H1 */
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -.02em;
  color: #F8F6F3;
  margin-bottom: 2rem;
}
.hero-title em {
  font-style: italic;
  color: #9dbfa8;
}

/* Wörter-Reveal */
.hero-title .word {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.hero-title .word.animated {
  animation: wordReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-title em .word { color: #9dbfa8; font-style: italic; }
.hero-title .line-break { display: block; height: 0; width: 100%; }

/* Sub-Text */
.hero-sub {
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(248, 246, 243, .8);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 3rem;
}

/* Actions */
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.btn-primary {
  background: #F8F6F3 !important;
  color: #33443D !important;
}
.btn-primary:hover {
  background: #ddd8d0 !important;
  color: #33443D !important;
}

.btn-ghost {
  color: rgba(248, 246, 243, .8) !important;
  border-bottom-color: rgba(248, 246, 243, .3) !important;
}
.btn-ghost:hover {
  color: #F8F6F3 !important;
  border-bottom-color: #F8F6F3 !important;
}

/* Scroll-Hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  opacity: 0;
  animation: fadeUp .8s ease 1.8s forwards;
}
.hero-scroll-hint span {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(248,246,243,.6);
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(248,246,243,.7), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { transform: scaleY(1); opacity: .4; }
  50%      { transform: scaleY(1.3); opacity: .8; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── TRUST BAR ── */
.trust-bar { background: #53685F !important; }

/* ── PRICE SECTION ── */
.price-section {
  background: #F8F6F3;
  padding: 6rem 4rem;
  border-bottom: 1px solid #ddd8d0;
}
.price-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.price-section-left .section-label { color: #53685F; }
.price-section-left .section-label::before { background: #53685F; }
.price-section-left h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  color: #33443D;
  margin-bottom: 1rem;
  letter-spacing: -.01em;
}
.price-section-left h2 em { font-style: italic; color: #53685F; }
.price-section-sub {
  font-size: .95rem;
  font-weight: 300;
  color: #53685F;
  line-height: 1.7;
}
.price-card-wrap { }

.price-card {
  background: #fff !important;
  border: none !important;
  box-shadow: 0 8px 48px rgba(51,68,61,.12) !important;
  backdrop-filter: none !important;
}

/* ── RESPONSIVE HERO ── */
@media (max-width: 900px) {
  .hero-inner { padding: 100px 1.5rem 4rem; }
  .hero-title { font-size: clamp(2.8rem, 9vw, 4rem); }
  .hero-sub { font-size: .95rem; }
  .price-section { padding: 4rem 1.5rem; }
  .price-section-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============================================================
   UPDATE 5 — Leistungen-Farben, Slots-Bar, Testimonial-Rahmen
   ============================================================ */

/* ── LEISTUNGEN Section — an Markenfarben anpassen ── */
.section#leistungen {
  background: #33443D !important;
}

.section#leistungen .section-label {
  color: rgba(248,246,243,.45) !important;
}
.section#leistungen .section-label::before {
  background: rgba(248,246,243,.25) !important;
}

.section#leistungen h2 {
  color: #F8F6F3 !important;
}
.section#leistungen h2 em {
  color: #9dbfa8 !important;
}

.section#leistungen .section-intro {
  color: rgba(248,246,243,.8) !important;
}

.deliverables {
  background: rgba(248,246,243,.06) !important;
  border-color: rgba(248,246,243,.08) !important;
}

.deliverable {
  background: rgba(248,246,243,.04) !important;
  border-color: rgba(248,246,243,.08) !important;
}

.deliverable:hover {
  background: rgba(248,246,243,.09) !important;
  border-color: rgba(248,246,243,.15) !important;
}

.del-num { color:#9dbfa8 !important; }
.deliverable h3 { color: #F8F6F3 !important; }
.deliverable p  { color: rgba(248,246,243,.8) !important; }

/* Shimmer in hellem Weiss */
.deliverable::before {
  background: linear-gradient(90deg, transparent, rgba(248,246,243,.35), transparent) !important;
}

/* ── SLOTS BAR — grün = noch verfügbar ── */
.slots-text { font-size: .78rem; }
.slots-text strong { color: #33443D; font-weight: 600; }
.bar-fill { background: #53685F !important; }
/* Restbalken (grau) zeigt bereits vergebene Plätze */
.bar-bg { background: #ddd8d0 !important; }

/* ── TESTIMONIALS — 1px Rahmen ── */
.t-card {
  border-width: 1px !important;
}

/* ── PROCESS SECTION ALT — Linie in Sandton ── */
.section-alt .process-steps::before {
  background: var(--sand-dark) !important;
}

/* ============================================================
   UPDATE 6 — Hero über Nav, Logos weiß, DSGVO-Checkbox
   ============================================================ */

/* ── HERO ÜBER DEN HEADER ── */
.hero {
  padding-top: 0 !important;
  min-height: 100svh !important;
}

.hero-inner {
  min-height: 100svh !important;
  padding-top: 80px !important; /* Freiraum damit Text nicht hinter Nav verschwindet */
}

/* Scroll-Hint über den Buttons ── */
.hero-scroll-hint {
  z-index: 10 !important;
}

/* ── NAV transparent auf Hero, dunkel beim Scrollen ── */
nav {
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

nav.scrolled {
  background: rgba(51,68,61,0.97) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── LOGOS WEISS ── */
.nav-logo img {
  filter: brightness(0) invert(1) !important;
  opacity: .92;
}

/* Nav scrolled: Logo bleibt weiß (passt auf dunklem Grund) */
nav.scrolled .nav-logo img {
  filter: brightness(0) invert(1) !important;
  opacity: .9;
}

.footer-logo-img {
  filter: brightness(0) invert(1) !important;
  opacity: .8;
}

/* Nav-CTA ── */
.nav-cta {
  background: rgba(248,246,243,.15) !important;
  color: #F8F6F3 !important;
  border: 1px solid rgba(248,246,243,.25) !important;
  transition: background .2s, border-color .2s !important;
}
.nav-cta:hover {
  background: rgba(248,246,243,.25) !important;
  border-color: rgba(248,246,243,.5) !important;
}
nav.scrolled .nav-cta {
  background: #F8F6F3 !important;
  color: #33443D !important;
  border-color: transparent !important;
}
nav.scrolled .nav-cta:hover {
  background: #ddd8d0 !important;
}

/* ── DSGVO CHECKBOX ── */
.checkbox-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: .75rem !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .82rem !important;
  font-weight: 300 !important;
  color: var(--ink-soft) !important;
  line-height: 1.55 !important;
}

.checkbox-label input[type="checkbox"] {
  width: 1.1rem !important;
  height: 1.1rem !important;
  min-width: 1.1rem !important;
  border: 1.5px solid var(--sand-dark) !important;
  background: var(--white) !important;
  border-radius: 2px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  margin-top: .15rem !important;
  transition: background .15s, border-color .15s !important;
  padding: 0 !important;
}

.checkbox-label input[type="checkbox"]:checked {
  background: #53685F !important;
  border-color: #53685F !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23F8F6F3' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 70% !important;
}

.checkbox-label input[type="checkbox"]:focus-visible {
  outline: 2px solid #53685F !important;
  outline-offset: 2px !important;
}

.checkbox-text a {
  color: #53685F !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.checkbox-text a:hover { color: #33443D !important; }

/* ── LEISTUNGSAUSSCHLUSS ── */
.exclusions {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid #ddd8d0;
  border-left: 3px solid #53685F;
}

.exclusions-title {
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #53685F;
  margin-bottom: .75rem;
}

.exclusions ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.exclusions ul li {
  font-size: .84rem;
  font-weight: 300;
  color: #4a4a45;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.exclusions ul li::before {
  content: '✕';
  color: #53685F;
  font-size: .7rem;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: .6;
}

/* Preisblock ohne Streichpreis */
.price-block--single {
  border-bottom: 1px solid #ddd8d0;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}

.price-block--single .price-new {
  font-family: var(--font-serif);
  font-size: 3.8rem;
  font-weight: 600;
  color: #33443D;
  line-height: 1;
}

/* Streichpreis-Styles ausblenden falls noch irgendwo vorhanden */
.price-old { display: none !important; }
.slots-bar { display: none !important; }
.card-badge { background: #53685F !important; }

/* ── LEISTUNGSAUSSCHLUSS — Hinweistext ── */
.exclusions-note {
  margin-top: 1rem;
  font-size: .84rem;
  font-weight: 300;
  color: #53685F;
  line-height: 1.7;
  padding-left: .25rem;
}

/* ── PREISKARTE — B2B Hinweis ── */
.price-notice {
  font-size: .78rem;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: .02em;
  margin-top: .35rem;
}

/* ── SEKTIONEN BLOCK ── */
.sektionen-section {
  padding: 6rem 4rem;
  background: var(--sand);
}
.sektionen-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.sektionen-header {
  max-width: 620px;
  margin-bottom: 3.5rem;
}
.sektionen-header h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 1rem;
}
.sektionen-header h2 em {
  font-style: italic;
  color: var(--moos);
}
.sektionen-intro {
  font-size: .98rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-top: 1rem;
}
.sektionen-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--sand-dark);
  border: 1px solid var(--sand-dark);
  margin-bottom: 2rem;
}
.sektion-item {
  background: var(--cream);
  padding: 2rem 1.5rem;
  position: relative;
  transition: background .2s, transform .2s var(--ease-out);
}
.sektion-item:hover {
  background: var(--white);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.07);
  z-index: 1;
}
.sektion-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.8rem;
  font-weight: 300;
  color: var(--moos);
  opacity: .18;
  line-height: 1;
  margin-bottom: .75rem;
}
.sektion-body h3 {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .5rem;
  letter-spacing: .02em;
}
.sektion-body p {
  font-size: .82rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.65;
}
.sektionen-note {
  font-size: .82rem;
  font-weight: 300;
  color: var(--ink-muted);
  font-style: italic;
  text-align: center;
  padding-top: .5rem;
}

@media (max-width: 900px) {
  .sektionen-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .sektion-item:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .sektionen-section { padding: 4rem 1.25rem; }
  .sektionen-list {
    grid-template-columns: 1fr;
  }
  .sektion-item:last-child {
    grid-column: auto;
  }
}