/* =========================================================================
   Sektion „Mehr als nur eine Website.“ – AutomaNext, Bento-Raster
   Nutzt die globalen Tokens der Seite, wenn vorhanden, sonst eigene Fallbacks.
   Alle Klassen sind mit „vb-“ präfixiert und kollidieren nicht mit der Seite.
   ========================================================================= */

vorteile-karten {
  --vb-blue: var(--blue, #1735ff);
  --vb-text: var(--text, #1d1d1f);
  --vb-text-secondary: var(--text-secondary, #6e6e73);
  --vb-bg: var(--bg-light, #f5f5f7);
  --vb-font-display: var(--font-display, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --vb-font-text: var(--font-text, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --vb-content: 980px;
  --vb-radius: 18px;
  --vb-ease: cubic-bezier(0, 0, 0.5, 1);
  display: block;
}

vorteile-karten *,
vorteile-karten *::before,
vorteile-karten *::after {
  box-sizing: border-box;
}

.vb {
  padding: 100px 0 120px;
  background: var(--vb-bg);
  font-family: var(--vb-font-text);
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: -0.022em;
  color: var(--vb-text);
  -webkit-font-smoothing: antialiased;
}

.vb-inner {
  max-width: calc(var(--vb-content) + 44px);
  margin: 0 auto;
  padding: 0 22px;
}

/* ---------- Überschrift ---------- */

.vb-headline {
  margin: 0;
  font-family: var(--vb-font-display);
  font-size: 48px;
  line-height: 1.08349;
  font-weight: 600;
  letter-spacing: -0.003em;
  text-wrap: balance;
}

.vb-accent {
  color: var(--vb-blue);
}

.vb-intro {
  max-width: 620px;
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.42;
  letter-spacing: 0.012em;
  color: var(--vb-text-secondary);
  text-wrap: pretty;
}

/* ---------- Bento-Raster ---------- */

.vb-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(320px, auto);
  gap: 12px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.vb-tile--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.vb-tile--2 { grid-column: 3 / 7; grid-row: 1; }
.vb-tile--3 { grid-column: 3 / 5; grid-row: 2; }
.vb-tile--4 { grid-column: 5 / 7; grid-row: 2; }
.vb-tile--5 { grid-column: 1 / 4; grid-row: 3; }
.vb-tile--6 { grid-column: 4 / 7; grid-row: 3; }

.vb-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--vb-radius);
  background: #1d1d1f;
  isolation: isolate;
  transition: transform 0.3s var(--vb-ease), box-shadow 0.3s var(--vb-ease);
}

.vb-tile:hover {
  transform: scale(1.01);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.vb-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--vb-ease);
}

.vb-tile:hover .vb-image {
  transform: scale(1.04);
}

/* Abdunklung: Fotos ruhiger, Text unten links gut lesbar */
.vb-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(8, 10, 20, 0.86) 0%, rgba(8, 10, 20, 0.45) 38%, rgba(8, 10, 20, 0.12) 70%),
    linear-gradient(90deg, rgba(8, 10, 20, 0.35) 0%, rgba(8, 10, 20, 0) 60%),
    rgba(8, 10, 20, 0.18);
}

.vb-copy {
  position: relative;
  padding: 0 24px 22px;
  color: #fff;
}

.vb-title {
  margin: 0;
  font-family: var(--vb-font-display);
  font-size: 22px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.vb-text {
  max-width: 360px;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.42859;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-wrap: pretty;
}

/* ---------- Eingeblendete UI-Elemente ---------- */

.vb-ui-wrap {
  display: flex;
  flex: 1 0 auto;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 22px 22px 18px;
  pointer-events: none;
}

.vb-ui {
  position: relative;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--vb-text);
  transition: transform 0.5s var(--vb-ease);
}

.vb-tile:hover .vb-ui {
  transform: translateY(-4px);
}

.vb-ui-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
}

.vb-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef0ff;
  font-size: 10px;
  font-weight: 600;
  color: var(--vb-blue);
}

.vb-ui svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.vb-ui svg circle {
  fill: var(--vb-blue);
}

.vb-ui svg path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Kontakt (große Kachel) */
.vb-ui--contact {
  width: min(84%, 250px);
  margin: 0 auto;
  border-radius: 22px;
}

.vb-ui-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eceef3;
}

.vb-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1735ff, #7b5cff);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.vb-ui-person {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.vb-ui-person strong {
  font-size: 12px;
}

.vb-ui-person small {
  font-size: 10px;
  color: var(--vb-text-secondary);
}

.vb-online {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.2);
}

.vb-bubble {
  max-width: 86%;
  margin: 10px 0 0;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 10.5px;
}

.vb-bubble--in {
  border-bottom-left-radius: 4px;
  background: #f2f2f5;
}

.vb-bubble--out {
  margin-left: auto;
  border-bottom-right-radius: 4px;
  background: var(--vb-blue);
  color: #fff;
}

.vb-ui-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
}

.vb-ui-actions span {
  padding: 6px 0;
  border-radius: 999px;
  background: #f2f2f5;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--vb-blue);
}

/* Konzept (breite Kachel) */
.vb-ui--concept {
  width: min(52%, 260px);
}

.vb-wire {
  display: grid;
  gap: 7px;
}

.vb-wire span {
  display: block;
  border-radius: 6px;
}

.vb-wire-nav {
  height: 10px;
  background: #eceef3;
}

.vb-wire-hero {
  position: relative;
  height: 64px;
  padding: 10px;
  background: linear-gradient(135deg, #eef0ff, #f6f2ff);
}

.vb-wire-hero i {
  display: block;
  height: 6px;
  margin-bottom: 5px;
  border-radius: 3px;
  background: #1d1d1f;
}

.vb-wire-hero i:first-child { width: 62%; }
.vb-wire-hero i:nth-child(2) { width: 44%; opacity: 0.35; }

.vb-wire-hero b {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 42px;
  height: 12px;
  border-radius: 999px;
  background: var(--vb-blue);
}

.vb-wire-cols {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.vb-wire-cols i {
  height: 30px;
  border-radius: 6px;
  background: #f2f2f5;
}

/* Code (kleine Kachel) */
.vb-ui--code {
  width: min(100%, 230px);
  background: rgba(22, 23, 29, 0.94);
  color: #f5f5f7;
}

.vb-ui-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}

.vb-ui-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5f57;
}

.vb-ui-dots i:nth-child(2) { background: #febc2e; }
.vb-ui-dots i:nth-child(3) { background: #28c840; }

.vb-ui-dots span {
  margin-left: 6px;
  font-size: 10px;
  color: #a1a1a6;
}

.vb-code {
  display: grid;
  gap: 6px;
}

.vb-code span {
  display: block;
  width: var(--w);
  height: 6px;
  margin-left: var(--x, 0);
  border-radius: 3px;
  background: var(--c);
  opacity: 0.9;
}

.vb-ui-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 10.5px;
  font-weight: 600;
}

.vb-ui-foot svg circle {
  fill: #28c840;
}

/* Listen (Betreuung, Rechtliches) */
.vb-ui--list {
  width: min(80%, 220px);
}

.vb-ui--list ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vb-ui--list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 9px;
  background: #f5f5f7;
  font-weight: 600;
}

.vb-ui--list li span {
  flex: 1;
}

.vb-ui--list em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: #15803d;
}

/* Erweiterungen */
.vb-ui--extend {
  width: min(70%, 230px);
}

.vb-module {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
  padding: 8px 10px;
  border: 1px dashed #d2d2d7;
  border-radius: 9px;
  font-weight: 600;
}

.vb-module.is-added {
  border-style: solid;
  border-color: rgba(23, 53, 255, 0.35);
  background: #eef0ff;
}

.vb-module b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--vb-blue);
  font-size: 13px;
  line-height: 1;
  color: #fff;
}

/* ---------- Responsive ---------- */

@media (max-width: 1068px) {
  .vb-headline {
    font-size: 40px;
    line-height: 1.1;
  }

  .vb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(330px, auto);
  }

  .vb-tile--1 { grid-column: 1; grid-row: 1 / 3; }
  .vb-tile--2 { grid-column: 2; grid-row: 1; }
  .vb-tile--3 { grid-column: 2; grid-row: 2; }
  .vb-tile--4 { grid-column: 1; grid-row: 3; }
  .vb-tile--5 { grid-column: 2; grid-row: 3; }
  .vb-tile--6 { grid-column: 1 / 3; grid-row: 4; }

  .vb-ui--concept {
    width: min(90%, 260px);
  }
}

@media (max-width: 734px) {
  .vb {
    padding: 64px 0 80px;
  }

  .vb-headline {
    font-size: 32px;
    line-height: 1.125;
    letter-spacing: 0.004em;
  }

  .vb-intro {
    font-size: 17px;
    line-height: 1.47059;
    letter-spacing: -0.022em;
  }

  .vb-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(380px, auto);
    gap: 12px;
    margin-top: 32px;
  }

  .vb-tile--1,
  .vb-tile--2,
  .vb-tile--3,
  .vb-tile--4,
  .vb-tile--5,
  .vb-tile--6 {
    grid-column: 1;
    grid-row: auto;
  }

  .vb-tile--1 {
    grid-row: span 1;
  }

  .vb-ui--contact,
  .vb-ui--concept,
  .vb-ui--list,
  .vb-ui--extend {
    width: min(86%, 250px);
  }
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  .vb-tile,
  .vb-image,
  .vb-ui {
    transition: none;
  }

  .vb-tile:hover,
  .vb-tile:hover .vb-image {
    transform: none;
  }

  .vb-tile:hover .vb-ui {
    transform: none;
  }
}