/* Startseite */

/* Hero mit Scroll-Effekt (Desktop und Tablet) */
.hero{position:relative;background:var(--dunkel)}
.hero__buehne{position:relative;height:100svh;min-height:520px;overflow:hidden}
.hero__video,.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video--mobil{display:none}
.hero__abdunkeln{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:var(--abdunkeln,1)}
.hero__logo{position:absolute;left:50%;top:50%;width:min(30vw,260px);transform:translate(-50%,-55%);opacity:var(--logo,1)}
.hero__hinweis{position:absolute;left:0;right:0;top:calc(50% + min(15vw,130px) + 1.5rem);text-align:center;font-size:.8rem;letter-spacing:.2em;font-weight:500;opacity:var(--logo,1);margin:0}
.hero__maske{position:absolute;inset:0;background:var(--dunkel);opacity:var(--maske-deckung,0);
  -webkit-mask:linear-gradient(#000 0 0),url(/media/img/look-different.svg) center/var(--maske-groesse,40vmin) no-repeat;
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0),url(/media/img/look-different.svg) center/var(--maske-groesse,40vmin) no-repeat;
  mask-composite:exclude}
.hero__text{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;padding:0 1.5rem}
.hero__text h2{font-size:clamp(2rem,6vw,4.5rem);font-weight:700;margin:0;letter-spacing:.01em;grid-area:1/1;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero__text .ueb1{opacity:var(--ueb1,0)}
.hero__text .ueb2{opacity:var(--ueb2,0)}
@media (min-width:768px){
  .hero{height:330vh}
  .hero__buehne{position:sticky;top:0}
}
/* Handy: nur Video, kein Scroll-Effekt */
@media (max-width:767px){
  .hero__buehne{height:75svh;min-height:420px}
  .hero__video--desktop,.hero__poster--desktop,.hero__maske,.hero__hinweis,.hero__text,.hero__logo{display:none}
  .hero__video--mobil{display:block}
  .hero__abdunkeln{--abdunkeln:.3}
}
@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .hero__buehne{position:relative;height:80svh}
  .hero__maske,.hero__text,.hero__hinweis{display:none}
  .hero__logo{opacity:1}
}

/* Einleitung und Kundenstimmen */
.intro{display:grid;gap:3rem;align-items:center}
.intro h1{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.8em}
.intro h1 span{display:block;font-weight:600}
@media (min-width:900px){.intro{grid-template-columns:1fr 1fr;gap:5rem}}
.stimmen{position:relative;min-width:0}
.stimmen__spur{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0}
.stimmen__spur::-webkit-scrollbar{display:none}
.stimme{flex:0 0 100%;scroll-snap-align:start;margin:0;padding:0 .2rem}
.stimme img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;margin-bottom:1rem}
.stimme blockquote{margin:0 0 1rem;font-size:.98rem}
.stimme__sterne{display:flex;gap:.15rem;margin:0 0 .6rem}
.stimme__sterne svg{fill:#a86f00}
.stimme figcaption strong{display:block;font-weight:600}
.stimmen__steuerung{display:flex;align-items:center;gap:.5rem;margin-top:1rem}
.stimmen__pfeil{width:48px;height:48px;border:2px solid var(--text-hell);background:none;color:var(--text-hell);font-size:1.4rem;line-height:1;cursor:pointer;border-radius:3px}
.stimmen__pfeil:hover{background:var(--text-hell);color:var(--weiss)}
.stimmen__punkte{display:flex;gap:.2rem;margin-left:.6rem}
.stimmen__punkte button{width:28px;height:44px;background:none;border:0;padding:0;cursor:pointer;position:relative}
.stimmen__punkte button::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#8a8a8a}
.stimmen__punkte button[aria-current="true"]::before{background:var(--text-hell)}

/* Was newcut besonders macht */
.heads h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:1.5rem}
.heads__raster{display:grid;gap:2rem}
@media (min-width:768px){.heads__raster{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.heads__raster p{margin:0 0 .8rem;min-height:3.3em}
.heads video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;border-radius:6px}

/* Vier Kompetenzen */
.komp{border-top:1px solid var(--linie);margin-top:4rem;padding-top:3rem}
.komp h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.komp__text{max-width:none}
.komp__logos{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem;align-items:center}
@media (min-width:768px){.komp__logos{grid-template-columns:repeat(4,1fr)}}
.komp__logos a{display:flex;justify-content:center;align-items:center;min-height:120px}
.komp__logos img{max-height:110px;width:auto;max-width:100%;object-fit:contain}

/* Was bedeutet */
.bedeutet{display:grid;gap:1.2rem;margin-top:5rem}
@media (min-width:768px){.bedeutet{grid-template-columns:1fr 1fr}}
.bed-karte{background:var(--hell);color:var(--text-hell);padding:.6rem .6rem 1.8rem;display:flex;flex-direction:column;border-radius:6px}
.bed-karte img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#cfcfcf;margin-bottom:1.1rem}
.bed-karte h3{font-size:1.1rem;font-weight:500;padding:0 .9rem}
.bed-karte p{padding:0 .9rem;margin:0;font-size:.95rem}
.bed-titel{justify-content:center;align-items:center;text-align:center;gap:1.5rem;padding:3rem 1rem}
.bed-titel h2{font-size:1.5rem;font-weight:500;margin:0}
.bed-titel img{width:min(55%,220px);aspect-ratio:auto;background:none;margin:0}

/* FAQ-Abschnitt */
.faq-kopf{max-width:900px;margin:0 auto 2rem}
.faq-kopf h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.faq-kopf .kicker{font-weight:500}

/* Schluss mit Bildmosaik */
.mosaik{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;align-items:center}
.mosaik img{width:100%;aspect-ratio:1;object-fit:cover}
.mosaik .m-logo{object-fit:contain;padding:.6rem}
@media (max-width:560px){.mosaik{gap:.5rem}}
.mosaik picture{display:block}