/* ==========================================================================
   Was ist Lector
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.wil-hero { position: relative; background: transparent; clip-path: inset(0); }
.wil-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 80px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.wil-hero__title {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.wil-hero__title .h1 { white-space: nowrap; }
.wil-hero__sub { width: 740px; max-width: 100%; text-align: center; }

/* --- "Mehr als lesen" ---------------------------------------------------- */
.wil-feat { position: relative; background: transparent; }
.wil-feat__inner { padding-block: 48px 155px; }
.wil-feat .shead { width: 652px; max-width: 100%; }
.wil-feat .shead__title { width: 612px; max-width: 100%; }

.wil-row {
  display: flex;
  align-items: center;
  gap: 87px;
  margin-left: 109px;
}
.wil-row--first { margin-top: 42px; }
.wil-row--second { margin-top: 75px; }
.wil-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.wil-copy h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  color: var(--plum-main);
}
.wil-copy__sub { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: normal; }
.wil-check { display: flex; align-items: flex-start; gap: 8px; }
.wil-check p { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: normal; }

.wil-shot { display: flex; flex-direction: column; align-items: center; flex: none; }
.wil-shot img {
  width: 519px;
  height: 432px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}

/* CTA is positioned to sit under the right-hand checklist, as in the Figma frame */
.wil-feat__cta { margin-left: 715px; margin-top: -96px; }

@media (max-width: 1240px) {
  .wil-row { margin-left: 0; gap: 40px; }
  .wil-feat__cta { margin-left: 0; margin-top: 40px; }
  .wil-feat__inner { padding-block: 48px 64px; }
}
@media (max-width: 980px) {
  .wil-row, .wil-row--second { flex-direction: column; align-items: flex-start; gap: 32px; }
  .wil-row--second { flex-direction: column-reverse; }
  .wil-shot { width: 100%; align-items: flex-start; }
  .wil-shot img { width: 100%; height: auto; aspect-ratio: 519 / 432; }
  .wil-check p, .wil-copy__sub { word-break: break-word; }
}

/* --- Claim --------------------------------------------------------------- */
.wil-claim { background: linear-gradient(to bottom, #ffffff, #fafbff); text-align: center; }
.wil-claim__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 80px;
}
.wil-claim__logo { width: 356px; height: 88.72px; max-width: 80%; object-fit: contain; }
.wil-claim__sub {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: clamp(18px, 1.67vw, 24px);
  line-height: normal;
  margin-top: 10px;
}

/* --- Dokumentenfabrik am Hafen (Lottie) -----------------------------------
   Die Sektion ist das Wasser: oben noch die Farbe der Claim-Sektion, nach
   unten ins Hafenblau. Die Szene zeichnet keinen eigenen Hintergrund, so
   bleibt der Rand der Leinwand bei jeder Breite unsichtbar. */
.wil-factory { position: relative; background: linear-gradient(to bottom, #fafbff 0%, #eef4fd 40%, #e4edfb 100%); clip-path: inset(0); }
.wil-factory__inner { padding-block: 16px 40px; }
.wil-factory__scene {
  width: 100%;
  aspect-ratio: 1400 / 660;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.wil-factory__scene.is-ready { opacity: 1; transform: none; }
.wil-factory__scene svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wil-factory__scene img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .wil-factory__scene { transition: none; opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .wil-factory__inner { padding-block: 12px 24px; }
}

/* --- Tabbed use cases ---------------------------------------------------- */
.wil-tabs { position: relative; background: var(--blue-dark-2); color: var(--white); }
.wil-tabs__inner { padding-block: 48px; }
.wil-tabs .shead { width: 804px; max-width: 100%; }

.tabset { position: relative; height: 524px; margin-top: 56px; margin-left: -8px; }
.tabset__row { position: absolute; inset: 0 auto auto 0; width: 100%; height: 56px; }
.tabset__tab {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 16px;
  background: var(--white);
  color: var(--black);
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-right: 1px solid rgba(0, 0, 0, .1);
  border-radius: 0 24px 0 0;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .25));
  font-family: var(--font-head);
  font-size: 20px;
  line-height: normal;
  text-transform: uppercase;
  text-align: center;
}
.tabset__tab span { width: 302px; max-width: 100%; }
.tabset__tab.is-active { font-weight: 700; color: var(--plum-main); z-index: 5; }
/* geometry copied from the Figma frame — the tabs overlap like folder tabs */
.tabset__tab--1 { left: 0; width: 298px; border-radius: 24px 24px 0 0; z-index: 4; }
/* Tab 1 deckt die linken 26px, Tab 3 die rechten 64px von Tab 2 ab: das Label bleibt im sichtbaren Teil. */
.tabset__tab--2 { left: 272px; width: 382px; padding-left: 26px; padding-right: 64px; z-index: 3; }
.tabset__tab--3 { left: 590px; width: 317px; z-index: 2; }
.tabset__tab--4 { left: 881px; width: 392px; padding-bottom: 46px; z-index: 1; }

.tabset__shade {
  position: absolute;
  left: 302px;
  top: 60px;
  width: 900px;
  height: 58px;
  background: rgba(0, 0, 0, .54);
  filter: blur(6px);
  z-index: 5;
}
.tabset__panel {
  position: absolute;
  left: 0;
  top: 56px;
  width: 1273px;
  max-width: 100%;
  height: 468px;
  background: var(--white);
  color: var(--black);
  border-radius: 0 24px 24px 24px;
  overflow: hidden;
  z-index: 6;
}
.tabset__text {
  position: absolute;
  left: 48px;
  top: 48px;
  width: 682px;
  max-width: calc(100% - 96px);
  display: flex;
  flex-direction: column;
  gap: 19px;
}
.tabset__text--732 { width: 732px; }
.tabset__text--740 { width: 740px; }
.tabset__text p { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: normal; }
.tabset__ill { position: absolute; }
.tabset__ill--1 { left: 65.99%; top: 16.24%; width: 23.03%; height: 67.31%; }
.tabset__ill--2 { left: 69.21%; top: 13.89%; width: 17.08%; height: 62.18%; }
.tabset__ill--3 { left: 68.03%; top: 14.10%; width: 22.46%; height: 71.85%; }
.tabset__ill--4 { left: 68.89%; top: 16.88%; width: 22.47%; height: 61.26%; }
.tabset__ill img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 1340px) {
  .tabset { height: auto; margin-left: 0; }
  .tabset__row {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tabset__tab {
    position: static;
    width: auto !important;
    left: auto;
    padding: 12px 20px !important;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .1);
    font-size: 16px;
    filter: none;
  }
  .tabset__tab span { width: auto; }
  .tabset__shade { display: none; }
  .tabset__panel {
    position: static;
    width: 100%;
    height: auto;
    border-radius: 16px;
    margin-top: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .tabset__text, .tabset__text--732, .tabset__text--740 { position: static; width: 100%; max-width: 100%; }
  .tabset__ill { position: static; width: 100% !important; height: auto !important; }
  .tabset__ill img { max-width: 280px; height: auto; margin: 0 auto; }
}
@media (max-width: 620px) {
  .tabset__panel { padding: 20px; }
}

/* --- Partner logos ------------------------------------------------------- */
.wil-partners { position: relative; background: transparent; clip-path: inset(0); }
.wil-partners__inner {
  position: relative;
  z-index: 1;
  padding-block: 83px 49px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wil-partners__title { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* Logo wall: two centred rows of individual logo files. Each logo keeps the
   relative size it had in the original composite sheet (scale 0.392), so the
   rows stay optically balanced. */
.wil-partners__wall {
  --pl: 1;
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
}
.wil-partners__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px 72px;
  max-width: 1120px;
}
.pl { display: block; height: auto; max-width: 100%; }
.pl--ovhcloud  { width: calc(198px * var(--pl)); }
.pl--bryck     { width: calc( 82px * var(--pl)); }
.pl--dvelop    { width: calc( 94px * var(--pl)); }
.pl--cgi       { width: calc( 84px * var(--pl)); }
.pl--aric      { width: calc(133px * var(--pl)); }
.pl--insurtech { width: calc(136px * var(--pl)); }
.pl--omninet   { width: calc(206px * var(--pl)); }
.pl--valuny    { width: calc(124px * var(--pl)); }
.pl--google    { width: calc(315px * var(--pl)); }
.pl--bmds      { width: calc(252px * var(--pl)); }

.wil-partners__cta { margin-top: 48px; }

@media (max-width: 1100px) {
  .wil-partners__inner { padding-block: 48px; }
  .wil-partners__wall { margin-top: 40px; gap: 32px; }
  .wil-partners__row { gap: 28px 48px; }
  .wil-partners__cta { margin-top: 32px; }
}
@media (max-width: 760px) {
  .wil-partners__wall { --pl: .78; gap: 24px; }
  .wil-partners__row { gap: 24px 36px; }
}

/* --- Lector vs. Chatbots ------------------------------------------------- */
.wil-vs { position: relative; background: transparent; clip-path: inset(0); }
.wil-vs__inner { padding-block: 48px 61px; position: relative; z-index: 1; }
.wil-vs .shead { width: 972px; max-width: 100%; }
.wil-vs__title { display: flex; flex-direction: row; gap: 14px; align-items: center; flex-wrap: wrap; }
/* Diese beiden Titel stehen nebeneinander, nicht gestapelt. Jeder Teil
   bleibt für sich unumbrochen („Lector vs." / „selbst bauen"); reicht die
   Breite nicht – etwa auf Englisch bei 390px –, rutscht der zweite Teil als
   Ganzes in die nächste Zeile, statt rechts aus dem Bild zu laufen. */
.wil-vs__title .h2 { white-space: normal; }
.wil-vs__title .shead__line { display: inline-block; width: auto; white-space: nowrap; }

.cmp {
  width: 1062px;
  max-width: 100%;
  margin: 54px auto 0;
  border-radius: 16px;
  overflow: hidden;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .25));
}
.cmp__row {
  display: flex;
  gap: 80px;
  align-items: center;
  justify-content: center;
  height: 72px;
  background: var(--white);
}
.cmp__row:nth-child(odd) { background: var(--blue-very-light); }
.cmp__label {
  width: 320px;
  flex: none;
  text-align: right;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: normal;
  color: var(--text-body);
  white-space: nowrap;
}
.cmp__cell {
  width: 200px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.cmp__cell img { width: 40px; height: 40px; }
.cmp__row--head .cmp__label,
.cmp__row--head .cmp__cell {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--text-body);
}
.cmp__row--head .cmp__cell img { width: 92px; height: 22px; }

@media (max-width: 1100px) {
  .cmp__row { gap: 24px; height: auto; min-height: 64px; padding: 12px 16px; }
  .cmp__label { width: auto; flex: 1 1 auto; white-space: normal; text-align: left; }
  .cmp__cell { width: 72px; }
  .cmp__row--head .cmp__label { text-align: left; }
}
@media (max-width: 560px) {
  .cmp__label { font-size: 14px; }
  .cmp__cell { width: 56px; }
  .cmp__cell img { width: 32px; height: 32px; }
  .cmp__row--head .cmp__cell img { width: 72px; height: 17px; }
}

/* Partnerlogos sind Links */
.wil-partners__row a { display: block; line-height: 0; transition: opacity .15s ease; }
.wil-partners__row a:hover { opacity: .7; }

/* --- Lector vs. selbst bauen --------------------------------------------- */
.wil-bvb { position: relative; background: var(--blue-very-light); }
.wil-bvb__inner { padding-block: 64px 72px; position: relative; z-index: 1; }
.wil-bvb .shead { width: 972px; max-width: 100%; }
.bvb { width: 1160px; max-width: 100%; margin: 44px auto 0; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); background: var(--white); }
.bvb__row { display: grid; grid-template-columns: 200px 1fr 1.5fr; gap: 24px; align-items: center; padding: 16px 24px; }
.bvb__row:nth-child(even) { background: var(--blue-very-light); }
.bvb__row--head { background: var(--blue-dark-2) !important; color: var(--white); }
.bvb__topic { font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1.3; }
.bvb__self, .bvb__lector { font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.45; }
.bvb__self { color: var(--text-muted); }
.bvb__lector { position: relative; padding-left: 26px; font-weight: 400; color: var(--blue-dark); }
.bvb__lector::before { content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; background: url("../assets/icons/ic-check-sm-blue.svg") center / contain no-repeat; }
.bvb__row--head .bvb__topic, .bvb__row--head .bvb__self { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--white); }
.bvb__row--head .bvb__lector { padding-left: 0; }
.bvb__row--head .bvb__lector::before { display: none; }
.bvb__row--head .bvb__lector img { width: 92px; height: 22px; filter: brightness(0) invert(1); }
.wil-bvb__foot { width: 1160px; max-width: 100%; margin: 32px auto 0; }
.bvb-quote { margin: 0; max-width: 760px; padding: 24px 28px 24px 32px; border-left: 4px solid var(--plum-main); background: var(--white); border-radius: 0 16px 16px 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.bvb-quote p { font-family: var(--font-head); font-weight: 500; font-size: 20px; line-height: 1.4; color: var(--blue-dark-2); margin: 0; }
.bvb-quote cite { display: block; margin-top: 12px; font-family: var(--font-body); font-style: normal; font-weight: 300; font-size: 14px; color: var(--text-muted); }
@media (max-width: 1100px) {
  .bvb__row { grid-template-columns: 1fr; gap: 6px; padding: 14px 18px; }
  .bvb__row--head .bvb__self, .bvb__row--head .bvb__lector { display: none; }
}

.bvb__lector strong { font-weight: 700; color: var(--blue-main); }

/* Die Vergleichsmatrix ist ein echtes <table> — nur so bleibt beim Umwandeln
   in Text erhalten, welcher Wert zu welcher Spalte gehört. Das Layout bleibt
   Flex; die Tabellensemantik übersteht das (im Accessibility-Baum von Chrome
   geprüft: mit und ohne ausdrückliche ARIA-Rollen identisch), deshalb stehen
   im Markup keine Rollen. */
table.cmp { display: block; border-collapse: collapse; }
.cmp tbody { display: block; }
.cmp th { font-weight: inherit; }

/* Ebenso die Build-vs-Buy-Matrix. th erbt hier Ausrichtung und Schnitt aus
   den vorhandenen Klassen — sonst zöge die Browservorgabe (zentriert, fett)
   die erste Spalte in die Mitte. */
table.bvb { display: block; border-collapse: collapse; }
.bvb tbody { display: block; }
.bvb th { font-weight: inherit; text-align: left; }