@font-face {
  font-family: 'RF Dewi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/RFDewi-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'RF Dewi Ex';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/RFDewiExpanded-Light.woff2) format('woff2');
}
@font-face {
  font-family: 'Miaglo';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/Miaglo-Light.woff2) format('woff2'),
       url(fonts/Miaglo-Light.ttf) format('truetype');
}
/* ────────────────────────────────────────────────
   THE OWNERY — Shared Styles
   ──────────────────────────────────────────────── */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }
  body {
    font-family: 'RF Dewi', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* background: #fffbf4; */
    background: #C54036;
    color: #fffbf4;
    overflow-x: hidden;
    counter-reset: bullets;
  }
a { text-decoration: none; color: inherit;}
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: inherit;}
b { font-weight: 500; }
/* ── NAV ──────────────────────────────────────── */
#main-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  background: #C54036;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  height: 80px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: .25rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* border: 2px solid var(--cream); */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-logo-mark {
  height: 46px;
  width: auto;
  display: block;
}
.nav-logo-icon svg { width: 80px; height: 80px; }
.nav-logo-icon svg .st0{ fill: #fffbf4;}
.nav-logo-icon svg .st1{ fill: none;}
.nav-brand {
  font-size: 1.2rem ;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fffbf4;
}
.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.nav-link {
  font-family: 'Miaglo', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fffbf4;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  /* transition: opacity .2s; */
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: #fffbf4;
  transition: width .25s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
/* .nav-link:hover { opacity: .8; } */
/* ── HAMBURGER ────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 13px;
  /* width: 66px; */
  /* height: 66px; */
  background: none;
  border: none;
  cursor: pointer;
  /* padding: 6px; */
  /* border-radius: 4px; */
  /* transition: opacity .2s; */
}
/* .hamburger:hover { opacity: .7; } */
.ham-bar {
  display: block;
  width: 40px;
  height: 3px;
  background: #fffbf4;
  /* border-radius: 2px; */
  transition: transform .3s ease;
  transform-origin: center;
}
/* Open state — X */
.hamburger.is-open .ham-bar:nth-child(1) { transform: translateY(15px) rotate(45deg); }
.hamburger.is-open .ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open .ham-bar:nth-child(3) { transform: translateY(-17px) rotate(-45deg); }
/* ── MOBILE OVERLAY ───────────────────────────── */
.nav-overlay {
  position: fixed;
  inset: 60px 0 0;
  z-index: 150;
  background: #C54036;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.nav-overlay.is-open {
  transform: translateX(0);
  pointer-events: all;
}
.nav-overlay-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 12px; */
  width: 75%;
}
.nav-overlay-links li {
  width: 100%;
  border-bottom: 1px solid #fffbf4;
}
.nav-overlay-links li:first-child { border-top: 1px solid #fffbf4; }
.nav-overlay-links a {
  font-family: 'Miaglo', sans-serif;
  font-weight: 300;
  display: block;
  padding: 2rem;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fffbf4;
  text-decoration: none;
  text-align: center;
  /* transition: background .2s; */
}
/* .nav-overlay-links a:hover { background: rgba(255,251,244,.08); } */
  /* ---- TEXTSEITE ---- */
  .textseite {
    background: #fffbf4;
    color: #191919;
    margin-top: 80px;
    padding: 2.5rem;
      /* min-height: 70vh; */
  }
  .textseite h2, .textseite h3, .textseite h4 {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.3rem;
  }
  .textseite p   {
      margin-bottom: 1.3rem;
  }
  .textseite li  {
    margin-left: 1.5rem;
  }
  .textseite ul  {
    margin-bottom: 1.3rem;
  }
  /* ---- HERO ---- */
  .hero {
    margin-top: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* height: calc(100vh - 70px); */
    /* height: 100vh; */
    height: calc(var(--vh, 1vh) * 100 - 80px);
    /* background: #C54036; */
    background-image: url("img/start_1b.webp");
    background-size: cover;
    background-position: center;
    /* padding: 2.5rem; */
    /* box-sizing: border-box; */
  }
  .hero-left {
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
    justify-content: flex-start;
    padding: 2.5rem;
    color: #C54036;
    color: #000000;
    position: relative;
    width: 100%;
    height: 100%;
    /* border-right: 1.5px solid #C54036; */
    /* background: #C54036; */
    /* opacity: 0.75; */
  }
  .hero-headline {
    font-family: 'RF Dewi Ex', sans-serif;
    font-weight: 300;
    /* font-size: clamp(2rem, 3vw, 3rem); */
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    /* color: var(--white); */
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 2rem;
  }
  .hero-sub {
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    line-height: 1.3;
    margin-bottom: 1.3rem;
    /* Die ruhige Wandfläche im Foto endet bei rund 480 px, der Text
       beginnt bei 40 px. 470 px fasst die Zeile bis "Immobilie" (454 px),
       aber nicht mehr "für" (499 px). */
    max-width: 470px;
    padding-right: 0;
  }
  .hero-tags {
    display: flex;
    flex-direction: column;
    gap:0;
    /* margin-bottom: 3rem; */
  }
  .hero-tag {
    font-size: 1.1rem;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .hero-right {
    position: relative;
    overflow: hidden;
    height: 100%;
  }
  .hero-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* ---- BTN ---- */
  .btn {
    font-family: 'RF Dewi Ex', sans-serif;
    font-weight: 300;
    display: inline-block;
    padding: 1.5rem 2rem;
    border-radius: 30rem;
    font-size: 1.2rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    /* cursor: pointer; */
    border: none;
    /* transition: all 0.25s; */
    margin: 0 auto;
    text-align: center;
    z-index: 1;
  }
  .btn-dark {
    background: #191919;
    color: #fffbf4;
  }
  .btn-dark:hover {
    /* background: #333; */
    /* letter-spacing: 0.2em; */
  }
   .btn-white {
    background: #fffbf4;
    color: #C54036;
  }
  .btn-white:hover {
    /* background: #333; */
    /* letter-spacing: 0.2em; */
  }
  .btn-outline-white {
    background: transparent;
    color: #fffbf4;
    border: 1.5px solid #fffbf4;
  }
  .btn-outline-white:hover {
    background: #fffbf4;
    color: var(--red);
  }
  /* ---- ABOUT SECTION ---- */
  .about {
    background: #191919;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 10vh;
  }
  .about-left {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .about-headline {
    font-family: 'RF Dewi Ex', sans-serif;
    font-weight: 300;
    /* font-size: clamp(2rem, 3vw, 3rem); */
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 2rem;
  }
  .about-body {
    /* font-size: clamp(1.1rem, 2vw, 1.4rem); */
    /* font-size: 1.1rem; */
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    line-height: 1.3;
    margin-bottom: 1.3rem;
    padding-right: 8%;
  }
  .about-body p + p { margin-top: 1.3rem; }
  .about-right {
    position: relative;
    overflow: hidden;
    height:120vh;
    padding: 6rem 2.5rem 2.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* gap: 1.5rem; */
  }
  /* ---- SERVICES SECTION ---- */
  .services {
    background: #FFFBF4;
    padding: 2.5rem;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .services-headline {
    font-family: 'RF Dewi Ex', sans-serif;
    font-weight: 300;
    /* font-size: clamp(2rem, 3vw, 3rem); */
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    text-transform: uppercase;
    color: #C54036;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-align: left;
    max-width: 50%;
    margin-bottom: 3rem;
  }
  /* ---- SERVICE CARDS ---- */
  .service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 30rem;
    padding: 2.5rem 1.25rem;
    /* width: 20vw; */
    /* min-height: 20rem; */
    /* min-height: 40vh; */
    /* min-height: 85%; */
    /* max-height: 95%; */
    text-transform: uppercase;
    letter-spacing: 0.2em;
    justify-content: space-between;
    /* height: 100%; */
  }
  .service-card-own {
    background: #C54036;
  }
  .service-card-sell {
    background: transparent;
    border: 1.5px solid #C54036;
    color: #B6372A;
  }
  .service-card-title {
    font-family: 'RF Dewi Ex', sans-serif;
    font-weight: 300;
    /* font-size: 2rem; */
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    line-height: 1;
    text-wrap: balance;
    /* padding-bottom: 0.1rem; */
    margin-bottom: 1rem;
    /* text-decoration: underline; */
    border-bottom-width: 1.5px;
    border-bottom-style: solid;
    /* align-items: flex-start; */
    letter-spacing: 0.02em;
  }
  .service-card-tagline {
    /* font-size: 1.2rem; */
    font-family: 'RF Dewi Ex', sans-serif;
    font-weight: 300;
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    line-height: 1.2;
    text-wrap: balance;
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 0 0.75rem 1.1rem;
    /* min-height: 4rem; */
    /* align-items: flex-start; */
  }
  .service-card-desc {
    /* font-size: 1.2rem; */
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    padding: 0 1rem;
    margin-bottom: 1.3rem;
    /* display: flex;   */
    /* align-items: flex-end; */
    /* justify-content: flex-end; */
  }
  .service-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-top: 0.5rem; */
    position: absolute;
    bottom: 0;
  }
  .service-card-icon svg {
    width: 60px;
    height: 60px;
  }
  .service-card-icon svg .st1 {
    fill: none;
  }
  .service-card-own .service-card-icon svg .st0{
    fill: #fffbf4;
  }
  .service-card-sell .service-card-icon svg .st0{
    fill: #C54036;;
  }
  .cards-row {
    margin: auto 0;
    display: flex;
    /* gap: 1.5rem; */
    gap: 5%;
    align-items: stretch;
    justify-content: center;
    position: relative;
    height: auto;
  }
  .cards-row .service-card {
    flex: 1;
    max-width: 240px;
    height: auto;
    min-height: 26rem;
  }

  /* ---- SERVICE CARDS: aus dem Hintergrund nach vorne ---- */
@keyframes cardForward {
  from {
    opacity: 0;
    transform: scale(.7) translateY(2.5rem);
    filter: blur(8px);
  }
  55% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}
.cards-row .service-card {
  opacity: 0;
}
.service-card.pump {
  animation: cardForward 1.1s cubic-bezier(.22, .68, .32, 1) .15s 1 both;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}
.service-card-sell.pump {
  animation-delay: .35s;
}
@media (prefers-reduced-motion: reduce) {
  .cards-row .service-card { opacity: 1; }
  .service-card.pump { animation: none; }
}

  /* ---- CTA SECTION ---- */
  .cta {
    display: flex;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 70vh;
  }
  .own-cta.cta {
    min-height: 50vh;
  }
  .cta-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    height: 70vh;
  }
  .cta-right {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .cta-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cta-img-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .cta-img-overlay .cta-headline,
  .cta-img-overlay .cta-sub {
    align-self: flex-start;
  }
  .cta-img-overlay .btn {
    margin: auto 2.5rem 2.5rem 0;
  }
  .cta-headline {
    font-family: 'RF Dewi Ex', sans-serif;
    font-weight: 300;
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 0.02em;
    /* color: #B6372A; */
    color: #fffbf4;
    padding: 2.5rem 2.5rem 1.25rem;
    /* margin-bottom: 4rem; */
  }
  .cta-sub {
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    line-height: 1.3;
    color: #fffbf4;
    padding: 0 2.5rem;
    max-width: 46ch;
  }
  .own-cta .cta-sub { color: #191919; }
  .own-cta .cta-headline{
    color: #191919;
  }
  .own-cta .cta-right{
    justify-content: center;
  }
  .cta-red {
    background: #C54036;
  }
    /* ---- OWN SELL---- */
  .intro {
    margin-top: 80px;
  }
  .intro-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* gap: 1rem; */
  }
  .own-intro {
    color: #191919;
    background: #fffbf4;
  }
  .sell-intro {
    color: #fffbf4;
    background: #191919;
  }
  .about-intro {
    color: #fffbf4;
    background: #191919;
  }

  .intro-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    /* min-height: 50vh; */
    padding: 2.5rem;
  }
  .intro-headline {
    font-family: 'RF Dewi Ex', sans-serif;
    font-weight: 300;
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding-bottom: 2rem;
    /* padding: 2.5rem 2.5rem; */
  }
  .intro-body {
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    line-height: 1.3;
    padding-right: 8%;
    /* padding: 0 2.5rem 2.5rem; */
  }
  .intro-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    height: auto;
  }
  .intro img {
    /* width: 75%; */
    /* height: 35vh; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* margin: 0 auto; */
  }
  .bullets {
    min-height: 50vh;
    padding: 0 2.5rem;
  }
  .own-bullets {
    color: #fffbf4;
    background: #191919;
  }
  .own-bullets b{
    /* color: #fff; */
  }
  .sell-bullets {
    color: #191919;
    background: #fffbf4;
  }
  .sell-bullets b{
    /* color: #000; */
  }
  .bullets-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top-width: 1px;
    border-top-style: dotted;
    padding: 2.5rem 0;
    gap: 1rem;
    /* min-height: 10rem; */
  }
  .bullets-row:first-child { border-top: none; }
  .bullets-row:first-child .bullets-left{ padding-bottom: 2rem; }
  /* .sell-bullets .bullets-row:last-child { border-bottom-width: 1px; border-bottom-style: dotted; } */
  .bullets-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .bullets-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .bullets-headline {
    font-family: 'RF Dewi Ex', sans-serif;
    font-weight: 300;
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding-right: 2rem;
  }
  h3.bullets-headline::before {
    counter-increment: bullets;
    content: counter(bullets) ".";
    /* font-weight: 500; */
    width: 2rem;
    float: left;
    margin-left: -2rem;
  }
  h3.bullets-headline {
    float: left;
    margin-left: 2rem;
  }
  h2.bullets-headline {
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    line-height: 1.1;
    padding-right: 8%;
  }
  .bullets-text {
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    line-height: 1.3;
    padding-right: 8%;
    padding-left: 2rem;
  }
  /* ---- BULLETS ACCORDION ---- */
  .bullets .bullets-row { position: relative; }
  .bullets-arrow {
    position: absolute;
    right: 0;
    top: 2.5rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    line-height: 0;
    display: inline-flex;
    transition: transform .3s ease;
  }
  .bullets-arrow.open { transform: rotate(180deg); }
  .bullets .bullets-right {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .45s cubic-bezier(.4, 0, .2, 1),
                opacity .35s ease;
  }
  .bullets .bullets-right.open { opacity: 1; }
  /* Punkte fahren beim Scrollen nacheinander ein – kürzerer Weg als sonst */
  .bullets .bullets-row.reveal { transform: translateY(40px); }
  .bullets .bullets-row.reveal.visible { transform: none; }

  /* ---- BULLETS: Desktop mit Icons, immer offen ---- */
  @media (min-width: 769px) {
    /* Ziffer durch Icon ersetzen */
    h3.bullets-headline::before {
      counter-increment: bullets;
      content: '';
      width: 3.8rem;
      height: 3.8rem;
      margin-left: -4.6rem;
      background-color: currentColor;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
    h3.bullets-headline { margin-left: 4.6rem; }
    .bullets-text {
      padding-left: 4.6rem;
      font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    }

    .bullets-row:nth-child(2)  h3.bullets-headline::before { -webkit-mask-image: url(img/step-1.png); mask-image: url(img/step-1.png); }
    .bullets-row:nth-child(3)  h3.bullets-headline::before { -webkit-mask-image: url(img/step-2.png); mask-image: url(img/step-2.png); }
    .bullets-row:nth-child(4)  h3.bullets-headline::before { -webkit-mask-image: url(img/step-3.png); mask-image: url(img/step-3.png); }
    .bullets-row:nth-child(5)  h3.bullets-headline::before { -webkit-mask-image: url(img/step-4.png); mask-image: url(img/step-4.png); }
    .bullets-row:nth-child(6)  h3.bullets-headline::before { -webkit-mask-image: url(img/step-5.png); mask-image: url(img/step-5.png); }
    .bullets-row:nth-child(7)  h3.bullets-headline::before { -webkit-mask-image: url(img/step-6.png); mask-image: url(img/step-6.png); }
    .bullets-row:nth-child(8)  h3.bullets-headline::before { -webkit-mask-image: url(img/step-7.png); mask-image: url(img/step-7.png); }
    .bullets-row:nth-child(9)  h3.bullets-headline::before { -webkit-mask-image: url(img/step-8.png); mask-image: url(img/step-8.png); }
    .bullets-row:nth-child(10) h3.bullets-headline::before { -webkit-mask-image: url(img/step-9.png); mask-image: url(img/step-9.png); }

    /* Akkordeon dauerhaft offen, Pfeil weg */
    .bullets .bullets-right {
      max-height: none !important;
      opacity: 1;
      overflow: visible;
    }
    .bullets-arrow { display: none; }
    .bullets-headline { cursor: default !important; }
  }
  /* ---- FLIESSTEXT: Expanded Light, ohne Sperrung ---- */
  .hero-sub,
  .about-body,
  .intro-body,
  .bullets-text,
  .service-card-desc,
  .cta-sub,
  .textseite p,
  .textseite li {
    font-family: 'RF Dewi Ex', sans-serif;
    font-weight: 300;
    letter-spacing: normal;
  }

  /* Heller Text auf dunklem Grund strahlt über die Kante und wirkt dadurch
     dicker. Leicht abgedunkelt wirkt derselbe Schnitt feiner. */
  .about-body,
  .own-bullets .bullets-text,
  .sell-intro .intro-body,
  .about-intro .intro-body,
  .service-card-own .service-card-desc,
  .cta-sub {
    color: rgba(255, 251, 244, 0.85);
  }

  /* ---- FOOTER ---- */
  footer {
    background: #191919;
    padding: 2.5rem 2.5rem 1rem 2.5rem;
    width: 100%;
    position: relative;
    float: left;
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    /* gap: 2rem 0; */
    /* align-items: start; */
  }
  .footer-left, .footer-right {
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
    /* gap: 2rem 0; */
    /* align-items: start; */
    width: 50%;
    position: relative;
    box-sizing: border-box;
    float: left;
  }
  .footer-left {
    border-right: 1px solid #fffbf4;
  }
  .footer-links {
    list-style: none;
    float: left;
    width: 50%;
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: 0.55rem; */
  }
  .footer-right .footer-links{
    width: 100%;
    text-align: right;
    /* float: right; */
  }
  .footer-links a {
    font-size: 1rem;
    color: #fffbf4;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    /* text-decoration: none; */
    /* transition: color 0.2s; */
  }
  ul.footer-links.rightaligned { text-align: right; }
  /* .footer-links a:hover { color: var(--white); } */
  .footer-divider {
    width: 1px;
    background: #fffbf4;
    height: 100%;
    min-height: 80px;
  }
  .newsletter-form {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid #fffbf4;
    padding-bottom: 4px;
    margin-top: 0.3rem;
  }
  .newsletter-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fffbf4;
    font-size: 1rem;
    flex: 1;
    padding: 6px 0;
  }
  .newsletter-input::placeholder { color: #fffbf4; }
  .newsletter-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 4px 6px; */
    color: #fffbf4;
  }
  .newsletter-btn svg { width: 24px; height: 24px; stroke: #fffbf4; fill: none; }
  .footer-bottom {
    background: #191919;
    /* border-top: 1px solid rgba(255,255,255,0.07); */
    padding: 1rem;
    display: flex;
    justify-content: center;
  }
  .footer-logo-icon {
    width: 36px;
    height: 36px;
    /* border: 1px solid rgba(255,255,255,0.3); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .footer-logo-icon svg { width: 36px; height: 36px; }
  .footer-logo-icon svg .st1{
    fill: #fffbf4;
  }
  .footer-logo-icon svg .st0{
    fill: #191919;
  }
  /* ---- SCROLL ANIMATIONS ---- */
  .reveal {
    opacity: 0;
    transform: translateY(100px);
    /* transition: opacity 0.7s ease, transform 0.7s ease; */
    transition: opacity 1s ease, transform 1s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: none;
  }
  .photoscroll {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .cluster {
    position:relative;
    width:100%;
    /* max-width:874px;  */
    /* height:792px;  */
    height: 100%;
    margin:0 auto;
    background-color:transparent;
    /* padding-bottom:100px; */
  }
.clusterPieces {
  position: absolute;
  display: block;
  object-fit: cover;
}
.scroll-1 {
  height:39%;
  aspect-ratio: 4 / 3;
  max-width:100%;
  top:0; right:0;
  z-index:1;
}
.scroll-2 {
  height:32%;
  aspect-ratio: 16 / 9;
  max-width:100%;
  top:39%; left:0;
  z-index:2;
}
.scroll-3 {
  height:39%;
  aspect-ratio: 5 / 4;
  max-width:100%;
  bottom:1%; right:6%;
  z-index:3;
}
  /* Umbruch, der nur auf dem Handy greift */
  .br-mobil { display: none; }

  /* ---- MOBILE ---- */
  @media (max-width: 768px) {
    #main-nav { padding: 0 1rem; height: 60px;}
    .nav-logo-icon { width: 60px; height: 60px; }
    .nav-logo-mark { height: 32px; margin-left: 0.25rem; }
    .nav-brand { font-size: 1.1rem;}
    .hamburger  { display: flex; gap: 8px; }
    .ham-bar { width: 28px; height: 2px; }
    .hamburger.is-open .ham-bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    .hamburger.is-open .ham-bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
    .nav-links  { display: none; }
    .textseite {padding: 1rem;}
    /* ---- Mobile Schriftgrößen ---- */
    body { font-size: 15px; }
    .hero-headline,
    .about-headline,
    .services-headline { font-size: 1.5rem; letter-spacing: 0.02em; }
    .intro-headline    { font-size: 1.4rem; letter-spacing: 0.02em; }
    .cta-headline      { font-size: 1.4rem; letter-spacing: 0.02em; }
    .hero-sub,
    .about-body,
    .intro-body,
    .bullets-text      { font-size: 1.05rem; }
    .bullets-headline  { font-size: 1.05rem; }
    h2.bullets-headline { font-size: 1.4rem; }
    .hero-tag  { font-size: 0.95rem; }
    .btn       { font-size: 1rem; padding: 1.1rem 1.6rem; }
    .nav-overlay-links a { font-size: 1.3rem; padding: 1.4rem; }
    .footer-links a { font-size: 0.85rem; }
    .hero, .about, .cta, .intro-row, .bullets-row {
      grid-template-columns: 1fr;
    }
    .hero {
      height: auto;
      margin-top: 60px;
      background-image: url("img/start_mobil.webp");
      /* Bild auf 118 % der Blockhöhe vergrößert und oben verankert –
         beschnitten wird dadurch unten, wo nur Dielen liegen. */
      background-size: auto 118%;
      background-position: left top;
    }
    .hero-left {
      height: calc(var(--vh, 1vh) * 50 - 30px);
      padding: 4.5rem 1rem 1rem;
    }
    .hero-sub { max-width: 14ch; padding-right: 0; }
    .br-mobil { display: inline; }
    .hero-right {
      height: calc(var(--vh, 1vh) * 50 - 30px);
    }
    .about-left { height: auto; padding: 1rem 1rem 0;}
    .about-right { height: 100vh; padding: 3rem 1rem 1rem 1rem;}
    /* Scrollbilder: größer */
    .scroll-1 { height: 30%; right: 0; top: 0; }
    .scroll-2 { height: 26%; top: 37%; }
    .scroll-3 { height: 30%; bottom: 2%; right: 4%; }
    .services { padding: 1rem; min-height: 0; }
    .services-headline { max-width: none; margin-bottom: 2rem; }
    .cards-row { flex-direction: column; align-items: center; gap: 1.5rem; }
    .cards-row .service-card{ width: 100%; max-width: 240px; height: auto; min-height: 26rem; }
    .service-card-title {font-size: 1.6rem}
    .service-card-tagline {font-size: 1.25rem;padding-bottom: .8rem;}
    .service-card-desc {font-size: 1rem;line-height: 1.3;}
    /* .cta { height: 50vh; } */
    .cta-left { height: 50vh; }
    .cta-right { height: 50vh; }
    .cta-headline {padding:1rem 1rem .75rem;}
    .cta-sub {padding:0 1rem 1.5rem; font-size: 1.05rem;}
    .cta-img-overlay { align-items: center; }
    .cta-img-overlay .btn { margin: 4rem auto 0; }
    .intro {margin-top: 60px;}
    .intro-img {
      height: auto;
      aspect-ratio: 3 / 4;
      margin-bottom: -1px;
    }
    .cta-left { margin-bottom: -1px; }
    .intro-text {
      min-height: calc(var(--vh, 1vh) * 50 - 30px);
      padding: 1rem;
    }
    .bullets { padding: 0 1rem;}
    .bullets-row { padding: 1rem 0;}
    .bullets-arrow { top: 1rem; }
    /* .intro { gap: 2.5rem; } */
    .intro-img.right { order: 2;}
    .own-cta .cta-left{  height: 25vh; }
    .own-cta .cta-right{ justify-content: flex-start; height: 25vh; }
    /* .hero-right img { height: 50vh; } */

    footer { grid-template-columns: 1fr 1fr; padding: 1rem; }
    ul.footer-links.rightaligned { text-align: left; }
    .footer-links { width: 100%;}
    .footer-divider { display: none; }
    /* .footer-bottom { padding: 1.2rem 2rem; } */
  }/* Windows rendert mit ClearType kräftiger als macOS mit Graustufen-
   Glättung. Auf Windows deshalb etwas Kontrast zurücknehmen, damit
   die Light-Schnitte nicht zulaufen. */
.win .about-body,
.win .own-bullets .bullets-text,
.win .sell-intro .intro-body,
.win .about-intro .intro-body,
.win .service-card-own .service-card-desc,
.win .cta-sub {
  color: rgba(255, 251, 244, 0.76);
}
.win .hero-left {
  color: #1c1c1c;
}
.win .services-headline,
.win .service-card-sell {
  color: #C04539;
}
/* picture soll im Flex-Layout nicht als eigene Ebene zählen */
.intro-img picture { display: contents; }