/* Startseite: Raster, Rhythmus, Produktkarten, Filter, verfeinertes Karussell. */

body.start {
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --abschnitt-y: clamp(72px, 9vw, 128px);
  --linie: rgba(255, 255, 255, .09);
  --flaeche: rgba(255, 255, 255, .028);
  --karte-radius: 20px;
}

[data-kapitel="produkte"] { --akzent: #8E97A3; --akzent-hell: #D7DDE4; }

.unsichtbar {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- Hero */
.start .hero {
  min-height: auto;
  justify-content: flex-start;
  padding: clamp(92px, 13vh, 140px) var(--rand) var(--abschnitt-y);
}
.start .hero-logos { gap: clamp(var(--s4), 3vw, var(--s7)); margin-bottom: var(--s6); }
.start .hero-logo { width: clamp(140px, min(17vw, 26vh), 300px); margin: 0; }
.start .hero-logo-klein { width: clamp(88px, min(10.5vw, 16vh), 186px); }
.studio-zeichen {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  max-width: 100%; margin: 0 auto; font-size: 1rem; line-height: 1; letter-spacing: normal;
}
.start .hero { overflow-x: clip; }
.start .hero-logos { position: relative; z-index: 2; }
.studio-neon {
  --sb: calc(min(100vw - 2rem, 46rem) * 1.8519);
  display: block; flex: none; width: var(--sb); max-width: none; height: auto; aspect-ratio: 1600 / 1000;
  margin: calc(var(--sb) * -0.25) calc((100% - var(--sb)) / 2) calc(var(--sb) * -0.22);
  pointer-events: none; position: relative; z-index: 1;
  color: #FFFFFF; font-family: var(--schrift-kopf); font-weight: 800; text-align: center;
}
.studio-zeichen .kennung {
  width: auto; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  line-height: 1.7; text-align: center; text-wrap: balance;
  font-size: clamp(.68rem, 1.1vw, .82rem); letter-spacing: .34em; padding-left: .34em;
  color: var(--rot-hell);
  text-shadow: 0 0 10px color-mix(in oklab, var(--rot-hell) 55%, transparent);
}
.studio-zeichen .kennung > span { display: inline; }
.studio-ort::before { content: "· "; }
  4%, 8%, 14%, 20%, 30%, 100% { opacity: 1; }
}

.leitsatz {
  max-width: 46ch; margin: var(--s8) auto 0;
  text-align: center; text-wrap: balance;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.6;
  color: var(--grau-hell);
}
.leitsatz::before {
  content: ""; display: block;
  width: clamp(60px, 8vw, 110px); height: 3px; margin: 0 auto var(--s5);
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--rot), transparent);
}

/* ----------------------------------------------------------- Karussell */
.start .karussell { margin: var(--s6) auto 0; }
@media (min-width: 701px) and (max-height: 900px) {
  .start .hero { padding-top: clamp(88px, 12vh, 140px); }
  .start .hero-logos { margin-bottom: var(--s5); }
  .start .karussell { margin-top: var(--s6); }
}
.start .karussell-ring.bereit .app-karte {
  transition: border-color .3s var(--weich), box-shadow .3s var(--weich),
              filter .6s var(--weich), opacity .6s var(--weich);
}
.start .karussell-ring.bereit .app-karte:not(.vorn) { filter: brightness(.5) saturate(.75); }
.start .karussell-ring.bereit .app-karte:not(.vorn):hover { filter: brightness(.8); }
.start .app-karte.vorn {
  border-color: var(--af);
  box-shadow: 0 0 40px -10px var(--af), inset 0 0 0 1px color-mix(in srgb, var(--af) 25%, transparent);
}
.start .app-karte:focus-visible { outline: 2px solid var(--creme); outline-offset: 4px; }
.start .karte-status { text-wrap: balance; text-align: center; }

.karussell-punkte {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2px; margin: var(--s5) auto 0;
}
.karussell-punkte button {
  width: 30px; height: 32px; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.karussell-punkte button::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--af) 45%, #2A2A33);
  transition: width .35s var(--weich), background .35s var(--weich);
}
.karussell-punkte button:hover::before { background: var(--af); }
.karussell-punkte button[aria-current="true"]::before {
  width: 22px; background: var(--af);
  box-shadow: 0 0 10px -2px var(--af);
}
.karussell-punkte button:focus-visible { outline: 2px solid var(--creme); outline-offset: -2px; border-radius: 8px; }

.start .karussell-hinweis {
  position: static; margin: var(--s2) auto 0; max-width: 46ch;
  font-size: .8rem; color: var(--grau);
}

/* ------------------------------------------------------- Abschnitte */
.start .start-abschnitt { padding: var(--abschnitt-y) 0; }
.start .start-abschnitt::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: min(var(--breite), 100% - var(--rand) * 2); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--linie) 20%, var(--linie) 80%, transparent);
}

.abschnitt-kopf { max-width: 760px; margin-bottom: var(--s7); }
.start .start-abschnitt h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); margin-bottom: var(--s4); }
.abschnitt-kopf p:not(.kennung),
.ueber-text {
  margin: 0; max-width: 62ch;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.65;
  color: var(--grau-hell);
}

/* ----------------------------------------------------- Filterleiste */
.filterleiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4) var(--s6); margin-bottom: var(--s6);
}
.filter { display: flex; flex-wrap: wrap; gap: var(--s2); }
.filter button {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4);
  font: 600 .9rem/1 var(--schrift-text); color: var(--grau-hell);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px;
  cursor: pointer;
  transition: background .25s var(--weich), color .25s var(--weich), border-color .25s var(--weich);
}
.filter button b {
  font-family: var(--schrift-kopf); font-size: .82rem;
  min-width: 1.6em; padding: 3px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: var(--creme);
}
.filter button:hover { border-color: rgba(255, 255, 255, .28); color: var(--creme); }
.filter button[aria-pressed="true"] { background: var(--creme); color: #07070A; border-color: var(--creme); }
.filter button[aria-pressed="true"] b { background: #07070A; color: var(--creme); }
.filter button:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; }

.verteilung {
  display: flex; gap: var(--s3);
  flex: 1 1 260px; max-width: 420px; height: 8px;
}
.verteilung-gruppe { display: flex; gap: 3px; transition: opacity .35s var(--weich); }
.verteilung-gruppe i { flex: 1; border-radius: 3px; background: var(--af); }
.verteilung-gruppe.aus { opacity: .18; }

/* --------------------------------------------------- Produktkarten */
.produkte {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.produkt {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s5);
  border-radius: var(--karte-radius);
  border: 1px solid color-mix(in srgb, var(--akzent) 28%, transparent);
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--akzent) 13%, transparent), transparent 60%),
    linear-gradient(180deg, #0D0D13, #09090D);
  scroll-margin-top: 96px;
  transition: transform .35s var(--weich), border-color .35s var(--weich),
              box-shadow .35s var(--weich), opacity .9s var(--weich);
}
.produkt.auf { transition-delay: calc(var(--n, 0) * 70ms); }
.produkt.auf.da { transition-delay: 0s; }
.produkt[hidden] { display: none; }
.produkt:hover, .produkt:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--akzent-hell) 60%, transparent);
  box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--akzent) 85%, transparent);
}
.produkt:target { border-color: var(--akzent-hell); }

.produkt-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.produkt-nr {
  font: 700 .78rem/1 var(--schrift-kopf); letter-spacing: .22em;
  color: color-mix(in srgb, var(--akzent-hell) 65%, var(--grau));
}
.produkt-marke { display: flex; align-items: center; gap: var(--s4); }
.produkt-symbol {
  flex: none; width: 64px; height: 64px; border-radius: 16px;
  box-shadow: 0 10px 26px -12px var(--akzent-hell);
}
.produkt-marke h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin: 0 0 var(--s1); }
.produkt-art { margin: 0; font-size: .88rem; line-height: 1.4; color: var(--grau); }

.produkt-claim { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--grau-hell); }
.produkt-claim b {
  display: block; margin-bottom: 2px;
  font: 700 1.14rem/1.3 var(--schrift-kopf); letter-spacing: .01em;
  color: var(--akzent-hell);
}

.produkt-fuss {
  margin-top: auto; padding-top: var(--s2);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5);
}
.produkt .nbtn { padding: 11px 20px; font-size: .9rem; }
.produkt-extern {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .86rem; color: var(--grau-hell); text-decoration: none;
}
.produkt-extern:hover { color: var(--akzent-hell); }
.produkt-extern:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; border-radius: 6px; }

.filter-leer { margin: var(--s4) 0 0; min-height: 1px; font-size: .82rem; color: var(--grau); }

/* --------------------------------------------------------- Vergleich */
.start #vergleich .tabelle-huelle { margin-top: 0; }
.start .vergleich { margin-top: 0; }
.start .vergleich thead th:first-child { width: 11rem; }
.start .vergleich thead th[class^="app-"] { width: calc((100% - 11rem) / 10); }
.start .vergleich thead th:first-child,
.start .vergleich tbody th {
  position: sticky; left: 0; z-index: 1;
  white-space: normal; background: #0B0C10;
}
.start .tabelle-huelle::after {
  content: ""; position: sticky; right: 0; top: 0;
  float: right; width: 48px; height: 100%;
  margin-left: -48px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(7, 7, 10, .9));
}
.tabelle-fuss { margin-top: var(--s4); max-width: 80ch; }
@media (min-width: 1200px) {
  .start #vergleich .tabelle-huelle {
    --tabelle-breite: min(100vw - 64px, 1640px);
    width: var(--tabelle-breite);
    margin-inline: calc((100% - var(--tabelle-breite)) / 2);
  }
  .start .tabelle-huelle::after { display: none; }
  .start .vergleich { min-width: 0; font-size: .8rem; }
  .start .vergleich th, .start .vergleich td { padding: .7rem .55rem; hyphens: auto; overflow-wrap: break-word; }
  .start .vergleich thead th { font-size: .84rem; }
  .start .vergleich tbody th { font-size: .78rem; }
  .start .vergleich thead th:first-child { width: 8.5rem; }
  .start .vergleich thead th[class^="app-"] { width: calc((100% - 8.5rem) / 11); }
  .start .vergleich thead th:first-child,
  .start .vergleich tbody th { position: static; background: none; }
}

/* ------------------------------------------------------------- Über */
.ueber-raster {
  display: grid; gap: var(--s7) var(--s8); align-items: center;
}
@media (min-width: 960px) { .ueber-raster { grid-template-columns: 1.2fr 1fr; } }
.start .ueber-raster .zahlen { margin: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ablauf-titel { margin: var(--s8) 0 0; font-size: clamp(1.3rem, 2.2vw, 1.8rem); }

.start .ablauf { margin-top: var(--s5); }
.start .ablauf-schritt { position: relative; }
.start .ablauf-schritt b {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--akzent-hell) 55%, transparent);
  background: color-mix(in srgb, var(--akzent) 14%, #0B0B0F);
  letter-spacing: .04em;
}
@media (min-width: 860px) {
  .start .ablauf-schritt:not(:last-child)::after {
    content: ""; position: absolute;
    top: calc(clamp(1.3rem, 2.6vw, 1.8rem) + 19px); left: calc(clamp(1.3rem, 2.6vw, 1.8rem) + 46px); right: 0;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--akzent-hell) 55%, transparent), transparent);
  }
}

/* ------------------------------------------------------- Fragen, Kontakt */
.start #fragen .fragen { margin-top: 0; }
.start .kontakt .huelle-schmal > h2 { margin-bottom: var(--s4); }

/* ------------------------------------------------------------ Handy */
@media (max-width: 700px) {
  .start .karussell-buehne { perspective: 1000px; }
  .start .karussell-ring { width: 150px; height: 214px; }
  .start .app-karte {
    --radius: 315px; padding: .8rem .6rem;
    transform: rotateY(calc(360deg / var(--karten, 13) * var(--i))) translateZ(var(--radius));
  }
  .karussell-punkte button { width: 24px; }
  .start .vergleich thead th:first-child { width: 7.5rem; }
  .start .vergleich thead th[class^="app-"] { width: calc((100% - 7.5rem) / 11); }
  .start .vergleich tbody th { font-size: .8rem; }
  .start .hero { padding-top: 96px; }
  .studio-zeichen .kennung { letter-spacing: .24em; padding-left: .24em; }
  .studio-zeichen .kennung > .studio-ort { display: block; }
  .studio-ort::before { content: none; }
  .start .karussell { margin-top: var(--s6); }
  .filterleiste { flex-direction: column; align-items: stretch; }
  .verteilung { flex: none; max-width: none; }
  .produkt { padding: var(--s5) var(--s4); }
  .produkt-fuss .nbtn { flex: 1 1 auto; }
}

@media (max-width: 360px) {
  .start .karussell-ring { width: 136px; height: 200px; }
  .start .app-karte { --radius: 290px; }
  .karussell-punkte { gap: 0; }
  .karussell-punkte button { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .produkt, .produkt:hover, .produkt:focus-within { transform: none; transition: none; }
  .start .karussell-ring.bereit .app-karte,
  .karussell-punkte button::before,
  .verteilung-gruppe { transition: none; }
}