:root{--ink:#27231f;--paper:#f4efe7;--white:#fffdf9;--gold:#a98656;--brown:#4c382c;--line:rgba(39,35,31,.18);--serif:Georgia,"Times New Roman",serif;--sans:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}.site-header{position:absolute;z-index:10;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:28px clamp(22px,5vw,72px);color:white}.brand{display:flex;flex-direction:column;line-height:1.05;letter-spacing:.04em}.brand span{font-size:.72rem;text-transform:uppercase;letter-spacing:.25em}.brand strong{font:400 1.55rem var(--serif)}nav{display:flex;align-items:center;gap:28px;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}nav a{opacity:.86}nav a:hover{opacity:1}.shop-link{border:1px solid rgba(255,255,255,.65);padding:11px 16px}.menu-button{display:none;background:none;border:1px solid rgba(255,255,255,.65);color:white;padding:10px 14px}.hero{min-height:92vh;position:relative;display:flex;align-items:flex-end;color:white;padding:140px clamp(24px,7vw,110px) 90px;overflow:hidden}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,14,10,.76) 0%,rgba(20,14,10,.33) 48%,rgba(20,14,10,.08) 100%)}.hero-image{position:absolute;inset:0;background:url("startbild-kordelring.jpg") center 50%/cover no-repeat;transform:scale(1.01)}.hero-copy{position:relative;z-index:1;max-width:760px}.eyebrow{margin:0 0 18px;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:700}.hero h1{font:400 clamp(3.2rem,7vw,7.2rem)/.96 var(--serif);letter-spacing:-.04em;margin:0 0 28px;max-width:900px}.hero-copy>p:not(.eyebrow){font-size:1.12rem;max-width:590px}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:34px}.button{display:inline-flex;justify-content:center;align-items:center;padding:14px 22px;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;border:1px solid transparent;transition:.2s}.primary{background:var(--white);color:var(--ink)}.primary:hover{background:var(--gold);color:white}.text-link{font-size:.84rem;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:4px}.intro{display:grid;grid-template-columns:70px 1.2fr 1fr;gap:clamp(26px,5vw,85px);padding:130px clamp(24px,7vw,110px)}.section-number{font-size:.72rem;letter-spacing:.16em;color:var(--gold);margin:4px 0}.intro h2,.services h2,.atelier h2,.contact h2{font:400 clamp(2.4rem,4.5vw,4.8rem)/1.05 var(--serif);letter-spacing:-.035em;margin:0}.intro-text{font-size:1.05rem;margin:50px 0 0;max-width:510px}.feature-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;padding:0 clamp(24px,4vw,64px) 130px}.feature{position:relative;height:620px;overflow:hidden;background:#ddd}.feature-large{height:760px}.feature:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(18,12,8,.7))}.feature div{position:absolute;z-index:1;left:36px;right:30px;bottom:30px;color:white}.feature span{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em}.feature h3{font:400 clamp(1.8rem,3vw,3rem)/1.08 var(--serif);margin:7px 0}.feature img{transition:transform .8s}.feature:hover img{transform:scale(1.025)}.services{background:var(--white);display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw;padding:130px clamp(24px,7vw,110px)}.services-heading{position:sticky;top:50px;align-self:start}.services-heading .section-number{margin-bottom:55px}.service-list article{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:32px 0;border-top:1px solid var(--line)}.service-list article:last-child{border-bottom:1px solid var(--line)}.service-list span{font-size:.7rem;color:var(--gold)}.service-list h3{font:400 1.65rem var(--serif);margin:0 0 8px}.service-list p{margin:0;max-width:610px;color:#5c554f}.atelier{display:grid;grid-template-columns:1fr 1fr;min-height:760px}.atelier-image{min-height:620px}.atelier-copy{display:flex;flex-direction:column;justify-content:center;padding:90px clamp(32px,7vw,110px);background:var(--brown);color:white}.atelier-copy .section-number{margin-bottom:55px}.atelier-copy h2{margin-bottom:28px}.atelier-copy>p:not(.eyebrow):not(.section-number){max-width:560px;color:rgba(255,255,255,.8)}.quote{text-align:center;padding:130px 24px;background:var(--paper)}.quote p{font:400 clamp(2rem,4vw,4rem)/1.2 var(--serif);max-width:1020px;margin:0 auto 25px}.quote span{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold)}.contact{text-align:center;background:#211b17;color:white;padding:120px 24px}.contact h2{max-width:880px;margin:0 auto 22px}.contact>p:not(.eyebrow){color:rgba(255,255,255,.7)}.contact-actions{display:flex;justify-content:center;gap:14px;margin:38px 0 25px}.light{background:var(--white);color:var(--ink)}.outline{border-color:rgba(255,255,255,.65)}.instagram{font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;border-bottom:1px solid rgba(255,255,255,.5)}footer{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:20px;padding:55px clamp(24px,5vw,72px);background:#17130f;color:rgba(255,255,255,.62);font-size:.75rem}footer p{text-align:center;margin:0}.footer-brand{color:white}footer>div:last-child{display:flex;justify-content:flex-end;gap:22px}.footer-brand strong{font-size:1.2rem}@media(max-width:860px){.site-header{align-items:flex-start;padding-top:22px}.menu-button{display:block}nav{display:none;position:absolute;right:22px;top:72px;background:#211b17;flex-direction:column;align-items:flex-start;padding:24px;min-width:220px}nav.open{display:flex}.hero{min-height:90vh;padding-bottom:58px}.hero:after{background:linear-gradient(0deg,rgba(20,14,10,.8),rgba(20,14,10,.18))}.hero h1{font-size:clamp(3rem,12vw,5rem)}.intro{grid-template-columns:40px 1fr;padding-top:90px;padding-bottom:90px}.intro-text{grid-column:2;margin-top:0}.feature-grid{grid-template-columns:1fr;padding-bottom:90px}.feature,.feature-large{height:560px}.services{grid-template-columns:1fr;padding-top:90px;padding-bottom:90px}.services-heading{position:static}.services-heading .section-number{margin-bottom:25px}.atelier{grid-template-columns:1fr}.atelier-copy{padding-top:80px;padding-bottom:80px}.quote{padding-top:90px;padding-bottom:90px}footer{grid-template-columns:1fr;text-align:center}footer p{text-align:center}footer>div:last-child{justify-content:center}.footer-brand{align-items:center}}@media(max-width:560px){.brand strong{font-size:1.25rem}.hero{padding-left:22px;padding-right:22px}.hero-actions,.contact-actions{align-items:stretch;flex-direction:column}.hero-actions{max-width:280px}.intro{grid-template-columns:1fr;gap:20px}.intro .section-number,.intro-text{grid-column:1}.feature-grid{padding-left:12px;padding-right:12px}.feature,.feature-large{height:470px}.feature div{left:24px}.services{padding-left:24px;padding-right:24px}.atelier-image{min-height:480px}.atelier-copy{padding-left:24px;padding-right:24px}.contact{padding-left:20px;padding-right:20px}}

/* Desktop Feinschliff 2026-09-16: ruhigere Proportionen auf großen Bildschirmen */
@media (min-width: 1000px) {
  .site-header {
    padding: 22px clamp(28px, 4vw, 58px);
  }

  .brand strong {
    font-size: 1.35rem;
  }

  .hero {
    min-height: 78vh;
    padding: 120px clamp(32px, 6vw, 88px) 68px;
  }

  .hero-copy {
    max-width: 650px;
  }

  .hero h1 {
    font-size: clamp(3.35rem, 5.2vw, 5.5rem);
    max-width: 760px;
    margin-bottom: 22px;
  }

  .hero-copy > p:not(.eyebrow) {
    max-width: 560px;
    font-size: 1rem;
  }

  .hero-actions {
    margin-top: 28px;
    gap: 18px;
  }

  .intro,
  .services,
  .atelier,
  .quote,
  .contact,
  footer {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  .intro {
    grid-template-columns: 55px 1.1fr 0.9fr;
    gap: clamp(24px, 4vw, 60px);
    padding: 96px clamp(32px, 6vw, 88px);
  }

  .intro h2,
  .services h2,
  .atelier h2,
  .contact h2 {
    font-size: clamp(2.5rem, 3.7vw, 4rem);
  }

  .intro-text {
    margin-top: 36px;
    font-size: 1rem;
  }

  .feature-grid {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(32px, 4vw, 58px) 96px;
  }

  .feature {
    height: 520px;
  }

  .feature-large {
    height: 620px;
  }

  .services {
    gap: 7vw;
    padding: 96px clamp(32px, 6vw, 88px);
  }

  .service-list article {
    padding: 24px 0;
  }

  .service-list h3 {
    font-size: 1.45rem;
  }

  .atelier {
    min-height: 620px;
  }

  .atelier-image {
    min-height: 560px;
  }

  .atelier-copy {
    padding: 72px clamp(38px, 6vw, 88px);
  }

  .quote {
    padding: 96px 32px;
  }

  .quote p {
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    max-width: 900px;
  }

  .contact {
    padding: 88px 32px;
  }
}