/* ===== Squarespace-inspiriert: Mauve/Taupe-Farbwelt, Tiefe, grosse Typo, Website-Mockups ===== */

/* Mauve/Taupe-Palette (aus dem Referenzbild abgeleitet) */
:root{
  --mauve-deep:#6e5a5a;      /* satter Grundton, unten */
  --mauve:#8a7373;           /* mittleres Mauve */
  --mauve-soft:#a08a8a;      /* helleres Mauve, oben */
  --mauve-pale:#efe8e6;      /* sehr helles Rosé-Beige für Flächen */
  --mauve-ink:#3d3231;       /* dunkler Text auf hellem Mauve */
}

/* Hero mit Mauve-Farbverlauf (oben heller, unten satter — wie im Beispiel) */
.hero-lush{
  background:linear-gradient(165deg,#a08a8a 0%,#8a7373 45%,#6e5a5a 100%);
  color:#fdfbfa;padding:0;overflow:hidden;position:relative;min-height:88vh;display:flex;align-items:center
}
.hero-lush .wrap{width:100%;max-width:1240px}
.hero-lush-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-lush h1{color:#fff;font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1.04;font-weight:400;letter-spacing:-.02em;margin:1.4rem 0}
.hero-lush .lede{color:#f0e8e6;font-size:clamp(1.05rem,1.5vw,1.28rem);max-width:44ch;margin-bottom:2rem}
.hero-lush .eyebrow{color:#f0e2d8}
.hero-lush .eyebrow::before{background:#f0e2d8}
.hero-lush .micro{color:#d8c8c6;margin-top:1.4rem}
.hero-lush .btn-primary{background:#fff;color:var(--mauve-ink)!important}
.hero-lush .btn-primary:hover{background:var(--mauve-pale);color:var(--mauve-ink)!important;transform:translateY(-1px)}
.hero-lush .btn-secondary{border-color:rgba(255,255,255,.5);color:#fff}
.hero-lush .btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}

/* Browser-Mockup (zeigt das Produkt: eine fertige Website) */
.mockup-stack{position:relative;perspective:1400px}
.browser{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 40px 80px -20px rgba(60,40,40,.5),0 15px 35px -10px rgba(60,40,40,.35);transform:rotateY(-8deg) rotateX(3deg);transform-style:preserve-3d}
.browser-bar{background:#f0ebe6;padding:11px 14px;display:flex;gap:7px;align-items:center;border-bottom:1px solid #e2dad3}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#cbc0b8;display:block}
.browser-bar .addr{margin-left:12px;background:#fff;border-radius:20px;height:22px;flex:1;max-width:260px;display:flex;align-items:center;padding:0 12px;font-size:11px;color:#8a857b;font-family:var(--sans)}
.browser-body{background:#fdfbf9}
.mw-nav{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid #f0e9e2}
.mw-brand{font-family:var(--wordmark);font-weight:700;font-size:13px;color:var(--ink)}
.mw-links{display:flex;gap:14px}
.mw-links span{font-size:10px;color:#8a857b}
.mw-hero{padding:34px 22px 30px}
.mw-eyebrow{font-family:var(--wordmark);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.mw-hero h4{font-family:var(--serif);font-size:24px;line-height:1.1;color:var(--ink);font-weight:500;margin-bottom:10px}
.mw-hero p{font-size:10.5px;color:#6b6660;line-height:1.6;max-width:34ch;margin-bottom:14px}
.mw-btn{display:inline-block;background:var(--ink);color:#fff;font-size:9px;font-weight:600;padding:8px 16px;border-radius:2px}
.mw-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:0 22px 30px}
.mw-card{background:#fff;border:1px solid #f0e9e2;border-radius:5px;padding:14px}
.mw-card .d{width:20px;height:20px;border-radius:50%;background:var(--gold-pale);margin-bottom:8px;position:relative}
.mw-card .d::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--gold)}
.mw-card h5{font-family:var(--serif);font-size:11px;color:var(--ink);margin-bottom:4px}
.mw-card p{font-size:8px;color:#8a857b;line-height:1.5}
.float-badge{position:absolute;left:-26px;bottom:-18px;background:#fff;border-radius:8px;padding:14px 18px;box-shadow:0 20px 40px -12px rgba(60,40,40,.35);z-index:3}
.float-badge .t{font-family:var(--wordmark);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8a857b;margin-bottom:4px}
.float-badge .v{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--gold)}
.float-badge .s{font-size:9px;color:#8a857b;margin-top:2px}

@media(max-width:900px){
  .hero-lush{min-height:auto;padding:5rem 0}
  .hero-lush-grid{grid-template-columns:1fr;gap:3rem}
  .browser{transform:none}
  .mockup-stack{max-width:480px;margin:0 auto}
  .float-badge{left:10px}
}

/* Mauve-Akzentsektion (ersetzt flaches cream-deep an Schlüsselstellen) */
.section-mauve{background:linear-gradient(150deg,#8a7373,#6e5a5a);color:#fdfbfa}
.section-mauve h2{color:#fff}
.section-mauve p{color:#f0e8e6}
.section-mauve .eyebrow{color:#f0e2d8}
.section-mauve .eyebrow::before{background:#f0e2d8}
.section-mauve .card{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20)}
.section-mauve .card h3{color:#fff}
.section-mauve .card p{color:#f0e8e6}
.section-mauve .card .num{color:#f0e2d8}
.section-mauve .timeline li::before{background:#6e5a5a;border-color:rgba(255,255,255,.25);color:#f0e2d8}
.section-mauve .timeline li{border-left-color:rgba(255,255,255,.2)}
.section-mauve .timeline strong{color:#fff}
.section-mauve .timeline span{color:#f0e8e6}

/* Helle Rosé-Beige Sektion (weicher als reines Cream) */
.section-rose{background:var(--mauve-pale)}

/* Feature-Split mit Website-Vorschau */
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
@media(max-width:900px){.feature-split{grid-template-columns:1fr;gap:2.5rem}}
.browser-wrap .browser{transform:rotateY(6deg) rotateX(2deg)}
.browser-wrap.left .browser{transform:rotateY(-6deg) rotateX(2deg)}

/* CTA in Mauve statt schwarz */
.cta-section.mauve{background:linear-gradient(150deg,#8a7373,#6e5a5a)}
.cta-section.mauve .btn-primary{background:#fff;color:var(--mauve-ink)!important}
.cta-section.mauve .btn-primary:hover{background:var(--mauve-pale)}
.cta-section.mauve .eyebrow{color:#f0e2d8}

/* Header leicht wärmer abstimmen */
.site-header{background:rgba(253,251,250,.92)}

/* ===== Feinschliff Abstände ===== */
.block p + p{margin-top:.9rem}
.two-col .check-list p,.two-col .plain-list p{margin:0}
.ref-tags{gap:.6rem}
.ref-tags span{margin:0}
/* Karten in dunklen Sektionen brauchen Luft */
.section-mauve .cards.three{gap:1.75rem;margin-top:1rem}
.section-mauve .card{padding:1.75rem}
.timeline li{padding-bottom:1.5rem}
.timeline strong{margin-bottom:.35rem}
/* Addon-Karten Abstand */
.cards.addons{gap:1.5rem}
.cards.addons .card{gap:.5rem}
.cards.addons .card strong{margin-top:.5rem}
/* Produktseite: enthalten-Liste Luft */
.two-col.align-start .check-list p{margin-bottom:.2rem}

/* ===== Runde Buttons (überall) ===== */
.btn{border-radius:40px!important;padding:.9rem 1.9rem}
.mw-btn{border-radius:40px}
.nav-cta{border-radius:40px!important}

/* ===== Band-Abstand fixen (war viel zu viel Luft) ===== */
.band{padding:1.3rem 0}
.hero-lush + .band{margin:0}
section.band{padding-top:1.3rem;padding-bottom:1.3rem}

/* ===== Echte Website-Screenshots im Browser-Rahmen ===== */
.shot{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 40px 80px -20px rgba(60,40,40,.5),0 15px 35px -10px rgba(60,40,40,.35)}
.shot .browser-bar{background:#f0ebe6;padding:11px 14px;display:flex;gap:7px;align-items:center;border-bottom:1px solid #e2dad3}
.shot .browser-bar i{width:11px;height:11px;border-radius:50%;background:#cbc0b8;display:block}
.shot .browser-bar .addr{margin-left:12px;background:#fff;border-radius:20px;height:24px;flex:1;max-width:280px;display:flex;align-items:center;padding:0 14px;font-size:11px;color:#8a857b}
.shot img{width:100%;display:block}
.hero-lush .shot{transform:rotateY(-8deg) rotateX(3deg)}
@media(max-width:900px){.hero-lush .shot{transform:none}}

/* Referenz-Galerie */
.ref-gallery{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;margin-top:2.5rem}
@media(max-width:900px){.ref-gallery{grid-template-columns:1fr;gap:2.5rem}}
.ref-item{display:flex;flex-direction:column;gap:1rem}
.ref-item .shot{transition:transform .3s,box-shadow .3s}
.ref-item:hover .shot{transform:translateY(-6px);box-shadow:0 50px 90px -20px rgba(60,40,40,.55)}
.ref-meta h3{font-size:1.2rem;margin-bottom:.3rem}
.ref-meta .cat{font-family:var(--wordmark);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.ref-meta p{font-size:.92rem;color:var(--ink-soft)}
.ref-meta a{display:inline-block;margin-top:.6rem;font-weight:600;font-size:.88rem;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:2px}

/* ===== Kontaktformular (fehlte komplett) ===== */
.contact-form{display:flex;flex-direction:column;gap:1.3rem;max-width:560px}
.contact-form label{display:flex;flex-direction:column;gap:.45rem;font-size:.92rem;font-weight:600;color:var(--ink)}
.contact-form input,.contact-form select,.contact-form textarea{font-family:var(--sans);font-size:1rem;font-weight:400;padding:.85rem 1rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;width:100%}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(168,128,79,.12)}
.contact-form textarea{resize:vertical;min-height:130px}
.contact-form label.checkbox{flex-direction:row;align-items:flex-start;gap:.7rem;font-weight:400;font-size:.9rem;color:var(--ink-soft)}
.contact-form label.checkbox input{width:18px;height:18px;accent-color:var(--gold);flex-shrink:0;margin-top:2px;padding:0}
.contact-form label.checkbox a{color:var(--gold);border-bottom:1px solid var(--gold)}
.contact-form .btn{align-self:flex-start;margin-top:.3rem}
.hidden{position:absolute!important;left:-9999px!important}
.info-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:2rem}
.info-box h2{font-size:1.4rem;margin-bottom:1rem}
.info-box p{font-size:.95rem;margin-bottom:.9rem}

.ref-gallery.two{grid-template-columns:1fr 1fr;max-width:820px;margin-left:auto;margin-right:auto}
@media(max-width:900px){.ref-gallery.two{grid-template-columns:1fr}}