:root{ --bg:#faf7f0; --bg-soft:#f0ead9; --ink:#1e3626; --ink-soft:#66766b; --accent:#2f6b47; --accent-dark:#204d33; --lagoon:#4a7c8c; --gold:#d9a441; --line:#e3dcc6; --max:1120px; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} .wrap{max-width:var(--max); margin:0 auto; padding:0 24px;} section{padding:96px 0;} h1,h2,h3{font-weight:800; letter-spacing:-0.02em;} .eyebrow{ display:inline-block; font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; } /* NAV */ header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; } .logo{font-weight:800; font-size:18px; letter-spacing:-0.01em;} .logo span{color:var(--accent);} .nav-links{display:flex; gap:36px; font-size:15px; font-weight:500; color:var(--ink-soft);} .nav-links a:hover{color:var(--ink);} .btn{ display:inline-flex; align-items:center; justify-content:center; padding:13px 26px; border-radius:8px; font-weight:600; font-size:15px; transition:all 0.15s ease; } .btn-primary{background:var(--accent); color:#fff;} .btn-primary:hover{background:var(--accent-dark); transform:translateY(-1px);} .btn-ghost{border:1px solid var(--line); color:var(--ink);} .btn-ghost:hover{border-color:var(--accent); color:var(--accent);} .nav-cta{display:none;} @media(min-width:860px){ .nav-cta{display:inline-flex;} } /* HERO */ .hero{padding:120px 0 100px; text-align:center;} .hero h1{ font-size:clamp(36px, 5.5vw, 64px); line-height:1.08; max-width:880px; margin:0 auto 24px; } .hero h1 em{ font-style:normal; background:linear-gradient(90deg, var(--accent), var(--gold), var(--lagoon)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero p.lead{ font-size:19px; color:var(--ink-soft); max-width:620px; margin:0 auto 40px; } .hero-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:56px;} .btn-lg{padding:16px 32px; font-size:16px;} .trust-row{ display:flex; flex-wrap:wrap; gap:40px; justify-content:center; color:var(--ink-soft); font-size:14px; font-weight:600; } .trust-row div{display:flex; align-items:center; gap:8px;} .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);} /* SECTION HEADS */ .section-head{text-align:center; max-width:640px; margin:0 auto 64px;} .section-head h2{font-size:clamp(28px, 3.5vw, 40px); margin-bottom:16px;} .section-head p{color:var(--ink-soft); font-size:17px;} /* SERVICES */ .services{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .service-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; } .service-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px; transition:transform 0.15s ease, box-shadow 0.15s ease; } .service-card:hover{transform:translateY(-4px); box-shadow:0 12px 32px rgba(17,19,24,0.08);} .service-icon{ width:48px; height:48px; border-radius:12px; background:rgba(255,107,71,0.12); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:22px; } .service-card:nth-child(2n) .service-icon{ background:rgba(15,172,155,0.14); color:var(--lagoon); } .service-card:nth-child(3n) .service-icon{ background:rgba(232,163,61,0.16); color:var(--gold); } .service-card h3{font-size:19px; margin-bottom:10px;} .service-card p{color:var(--ink-soft); font-size:15px;} /* ABOUT */ .about-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:64px; align-items:center; } @media(max-width:860px){ .about-grid{grid-template-columns:1fr;} } .about-photo{ aspect-ratio:1/1; border-radius:20px; background:linear-gradient(135deg, var(--accent), var(--gold) 55%, var(--lagoon)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:72px; font-weight:800; } .about-text h2{font-size:clamp(26px,3vw,34px); margin-bottom:20px;} .about-text p{color:var(--ink-soft); font-size:16px; margin-bottom:16px;} .about-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;} .tag{ background:var(--bg-soft); border:1px solid var(--line); padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600; } /* TESTIMONIALS */ .testimonials{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .t-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; } .t-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px; } .t-stars{color:var(--gold); font-size:15px; margin-bottom:16px;} .t-quote{font-size:15.5px; color:var(--ink); margin-bottom:24px;} .t-author{display:flex; align-items:center; gap:12px;} .t-avatar{ width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; } .t-card:nth-child(2n) .t-avatar{ background:var(--lagoon); } .t-card:nth-child(3n) .t-avatar{ background:var(--gold); } .t-name{font-weight:700; font-size:14px;} .t-role{font-size:13px; color:var(--ink-soft);} .t-note{ text-align:center; font-size:13px; color:var(--ink-soft); margin-top:40px; font-style:italic; } /* CONTACT */ .contact{ background:linear-gradient(135deg, #142a1f, #1d3f2c 45%, #24512f); color:#fff; border-radius:24px; padding:72px 48px; text-align:center; margin:0 24px; position:relative; overflow:hidden; } .contact::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%, rgba(74,124,140,0.35), transparent 45%), radial-gradient(circle at 85% 80%, rgba(217,164,65,0.25), transparent 50%); pointer-events:none; } .contact > *{position:relative;} @media(min-width:1168px){ .contact{margin:0 auto; max-width:var(--max);} } .contact h2{font-size:clamp(28px,4vw,40px); margin-bottom:16px;} .contact p{color:#d3e6e1; max-width:520px; margin:0 auto 36px; font-size:16px;} .contact-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:28px;} .btn-primary-dark{background:var(--accent); color:#fff;} .btn-primary-dark:hover{background:var(--accent-dark);} .btn-outline-dark{border:1px solid rgba(255,255,255,0.25); color:#fff;} .btn-outline-dark:hover{border-color:#fff;} .contact-email{color:#e8c179; font-weight:600; font-size:15px;} /* FOOTER */ footer{padding:40px 0; text-align:center; color:var(--ink-soft); font-size:13px;} @media(max-width:640px){ section{padding:64px 0;} .contact{padding:48px 24px;} }
Zum Inhalt springen