@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800&display=swap');

:root{
  --bg:#f7f5f2;
  --text:#111;
  --line:#ddd;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
}

.hero{
  min-height:60vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:4rem 2rem;
}

.hero h1{
  font-size:clamp(4rem,10vw,8rem);
  font-weight:800;
  letter-spacing:-0.05em;
}

.subtitle{
  font-size:clamp(1.2rem,2vw,2rem);
  margin-top:1rem;
}

.content{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  padding:10rem 2rem;
}

.content p{
  font-size:1.4rem;
  line-height:1.8;
  margin-bottom:2rem;
}

.references{
  padding:8rem 2rem;
}

.references h2{
  text-align:center;
  font-size:3rem;
  margin-bottom:4rem;
}

.carousel{
 display:flex;
  gap:2rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;

  justify-content: center;
  align-items: center;
}

.video-card{
  flex:0 0 500px;
  scroll-snap-align:start;
}

.video-card iframe{
  width:100%;
  aspect-ratio:16/9;
  border:none;
  border-radius:12px;
}

.contact{
  padding:8rem 2rem;
  text-align:center;
}

.button{
  border:1px solid #111;
  padding:1rem 2.5rem;
  text-decoration:none;
  color:#111;
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:.2s;
}

.button:hover{
  background:#111;
  color:#fff;
}

footer{
  border-top:1px solid var(--line);
  margin-top:6rem;
  padding:3rem 2rem;
  display:flex;
  justify-content:space-between;
  gap:2rem;
  font-size:.95rem;
}

@media(max-width:768px){
  footer{
    flex-direction:column;
  }

  .video-card{
    flex:0 0 90%;
  }

  .content p{
    font-size:1.15rem;
  }
}


.video-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 20px;
  scroll-behavior: smooth;
}

/* jedes Slide */
.video-slide {
  flex: 0 0 80%;
  scroll-snap-align: center;
}

/* responsive Video Container */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio */
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

/* Vimeo iframe full size */
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* optional: scrollbar hübscher */
.video-carousel::-webkit-scrollbar {
  height: 8px;
}

.video-carousel::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.video-carousel::-webkit-scrollbar-track {
  background: transparent;
}