:root{
  --forest:#26341f;
  --forest-deep:#182218;
  --gold:#b68b45;
  --gold-dark:#9e773b;
  --ink:#171a16;
  --muted:#666b64;
  --paper:#fbfaf7;
  --soft:#f2efe7;
  --line:#dedbd2;
  --max:1180px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.62
}

a{color:inherit}

img{
  max-width:100%;
  display:block
}

/* Header / Navigation */

.site-header{
  background:#fff;
  position:relative;
  z-index:20;
  box-shadow:0 1px 0 rgba(0,0,0,.05)
}

.nav{
  max-width:var(--max);
  margin:auto;
  padding:12px 22px;
  display:flex;
  align-items:center;
  gap:28px;
  min-height:112px
}

.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex:0 0 auto
}

.brand img{
  width:255px;
  max-height:94px;
  object-fit:contain;
  object-position:left center
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:28px;
  margin-left:auto;
  flex-wrap:wrap
}

.nav-links a{
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  padding:8px 0;
  position:relative
}

.nav-links a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{
  transform:scaleX(1)
}

.nav-cta{
  background:var(--gold);
  color:#fff;
  padding:12px 18px!important;
  border-radius:3px
}

.nav-cta:hover{
  background:var(--gold-dark)
}

/* Hero */

.hero{
  min-height:510px;
  background:
    linear-gradient(
      90deg,
      rgba(14,23,15,.78) 0%,
      rgba(14,23,15,.58) 45%,
      rgba(14,23,15,.15) 72%
    ),
    url('assets/hero.jpg') center/cover no-repeat;
  color:#fff;
  display:flex;
  align-items:center
}

.hero.small{
  min-height:310px;
  background:
    linear-gradient(
      90deg,
      rgba(14,23,15,.76),
      rgba(14,23,15,.35)
    ),
    url('assets/hero.jpg') center/cover no-repeat
}

.hero-content{
  width:min(var(--max),100%);
  margin:auto;
  padding:64px 24px;
  max-width:none
}

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

.eyebrow,
.kicker{
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gold);
  font-size:.78rem;
  font-weight:800
}

.hero h1{
  font:700 clamp(3.1rem,6vw,5.6rem)/.98 Georgia,serif;
  margin:.06em 0 .22em;
  letter-spacing:-.02em
}

.hero.small h1{
  font-size:clamp(2.8rem,5vw,4.5rem)
}

.hero h2{
  font:400 clamp(1.3rem,2vw,1.75rem)/1.35 Arial,Helvetica,sans-serif;
  color:#d2a65a;
  margin:0 0 20px
}

.hero-rule{
  height:1px;
  background:rgba(255,255,255,.45);
  max-width:520px;
  margin:22px 0
}

/* Buttons */

.buttons{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:24px
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 18px;
  border:1px solid currentColor;
  text-decoration:none;
  font-size:.9rem;
  font-weight:700;
  border-radius:3px;
  transition:.2s ease
}

.button.light{
  color:#fff;
  background:rgba(0,0,0,.12)
}

.button.light:hover{
  background:#fff;
  color:var(--forest-deep)
}

.button.gold{
  color:#fff;
  background:var(--gold);
  border-color:var(--gold)
}

.button.gold:hover{
  background:var(--gold-dark);
  border-color:var(--gold-dark)
}

.button.dark{
  color:#fff;
  background:var(--forest);
  border-color:var(--forest)
}

.button.dark:hover{
  background:var(--forest-deep);
  border-color:var(--forest-deep)
}

/* Benefits */

.benefits{
  background:var(--forest-deep);
  color:#fff
}

.benefits-grid{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:24px
}

.benefit{
  padding:0 24px;
  border-right:1px solid rgba(255,255,255,.28)
}

.benefit:first-child{
  padding-left:0
}

.benefit:last-child{
  border-right:0;
  padding-right:0
}

.benefit strong{
  display:block;
  color:#e3c287;
  font-size:1.05rem;
  margin-bottom:4px
}

.benefit span{
  font-size:.86rem;
  color:#eef1eb
}

/* Main content */

main{
  min-height:40vh
}

.section{
  max-width:var(--max);
  margin:auto;
  padding:76px 24px
}

.section.narrow{
  max-width:860px
}

.section h2,
.section h3{
  font-family:Georgia,serif
}

.section h2{
  font-size:clamp(2rem,3vw,2.7rem);
  line-height:1.15;
  margin:.22em 0 .45em
}

.section h3{
  font-size:1.45rem
}

.lead{
  font:400 clamp(1.55rem,3vw,2.35rem)/1.3 Georgia,serif;
  text-align:center;
  max-width:900px;
  margin:0 auto
}

.home-intro{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:54px;
  align-items:center
}

.home-intro img{
  width:100%;
  aspect-ratio:16/8.5;
  object-fit:cover;
  border-radius:8px
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start
}

.card{
  background:#fff;
  border:1px solid var(--line);
  padding:28px;
  border-radius:6px
}

.feature-image{
  aspect-ratio:4/3;
  object-fit:cover;
  width:100%;
  border-radius:6px
}

.rule{
  border:0;
  border-top:1px solid var(--line);
  margin:38px 0
}

.muted{
  color:var(--muted)
}

ul.clean{
  padding-left:1.2rem
}

/* Facts */

.facts{
  background:var(--soft)
}

.facts-grid{
  max-width:var(--max);
  margin:auto;
  padding:52px 24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px
}

.fact strong{
  display:block;
  font:700 1.45rem Georgia,serif;
  margin-bottom:5px;
  color:var(--forest)
}

/* Prices */

.price-table{
  width:100%;
  border-collapse:collapse
}

.price-table th,
.price-table td{
  padding:12px 8px;
  border-bottom:1px solid var(--line);
  text-align:left
}

.price-table th{
  font-family:Georgia,serif;
  color:var(--forest)
}

/* Contact / Forms */

.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px
}

.form{
  display:grid;
  gap:16px
}

.form label{
  font-size:.88rem;
  font-weight:700
}

.form input,
.form textarea,
.form select{
  width:100%;
  padding:12px;
  border:1px solid #b9b9b2;
  background:#fff;
  font:inherit;
  border-radius:3px
}

.form textarea{
  min-height:130px
}

.note{
  padding:14px 16px;
  background:var(--soft);
  border-left:3px solid var(--gold);
  font-size:.92rem
}

/* Bestellung */

.order-selection > p{
  max-width:760px
}

.order-selection .note{
  margin:30px 0 34px
}

.order-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px
}

.order-option{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:30px
}

.order-option h3{
  color:var(--forest);
  font-size:1.65rem;
  line-height:1.2;
  margin:0 0 10px
}

.order-option p{
  color:var(--muted);
  margin:0 0 24px
}

.order-option .button{
  margin-top:auto
}

.order-prices{
  margin:32px 0 0;
  padding-top:24px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.92rem
}

.order-prices a{
  color:var(--forest);
  font-weight:700;
  text-decoration-color:var(--gold);
  text-underline-offset:3px
}

.order-prices a:hover{
  color:var(--gold-dark)
}

/* Footer */

.site-footer{
  background:var(--forest-deep);
  color:#dce3dc
}

.footer-inner{
  max-width:var(--max);
  margin:auto;
  padding:32px 24px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap
}

.footer-inner a{
  color:white
}

.footer-small{
  color:#aeb9b0;
  font-size:.85rem
}

/* Tablet */

@media(max-width:980px){

  .nav{
    min-height:auto;
    align-items:flex-start;
    flex-direction:column
  }

  .nav-links{
    margin-left:0;
    justify-content:flex-start;
    gap:14px 20px
  }

  .brand img{
    width:220px
  }

  .benefits-grid{
    grid-template-columns:repeat(2,1fr);
    gap:22px
  }

  .benefit{
    border-right:0;
    padding:0
  }

  .home-intro{
    grid-template-columns:1fr
  }
}

/* Mobile */

@media(max-width:760px){

  .hero{
    min-height:560px;
    background-position:60% center
  }

  .hero-content{
    padding:58px 20px
  }

  .hero h1{
    font-size:clamp(2.75rem,13vw,4.4rem)
  }

  .grid-2,
  .contact-grid,
  .facts-grid,
  .benefits-grid{
    grid-template-columns:1fr
  }

  .section{
    padding:52px 20px
  }

  .hero.small{
    min-height:250px
  }

  .buttons{
    flex-direction:column;
    align-items:flex-start
  }

  .button{
    width:100%;
    max-width:310px
  }

  /* Bestellung */

  .order-options{
    grid-template-columns:1fr;
    gap:18px
  }

  .order-option{
    padding:24px
  }

  .order-option .button{
    max-width:none
  }

  .order-selection .note{
    margin:26px 0 30px
  }

  .order-prices{
    margin-top:28px
  }

  .footer-inner{
    flex-direction:column
  }

  .nav-links{
    font-size:.9rem
  }

  .brand img{
    width:200px
  }
}